WooCommerce Customization Deep Dive: Hiding Elements & Streamlining Checkout

Optimizing the user experience on an eCommerce site is paramount for conversion rates. Often, this involves refining the visual presentation and streamlining the checkout process. A recent query on the WordPress.org support forum, originally titled “few cart questions”, perfectly encapsulates several common customization challenges faced by WooCommerce store owners. The user sought to hide various elements on their product and cart pages and adjust payment button visibility, highlighting the need for precise control over the storefront.

As WooCommerce migration experts and community analysts, we recognize these as frequent points of friction. This article delves into the specific issues raised in the forum topic, providing actionable insights and step-by-step instructions for store owners and developers looking to achieve a cleaner, more focused WooCommerce experience.

Streamlining Product Pages: Hiding Unwanted Elements

The forum user's request to hide “Home/Uncategorized text messaging”, “SKU: N/A Category Uncategorized”, and the “Additional information and reviews section” points to a desire for minimalist product displays. This is a valid approach, especially for stores with specific branding or product types where default information might be redundant or distracting.

1. Hiding Breadcrumbs (e.g., “Home/Uncategorized”)

Breadcrumbs are navigational aids, but they can sometimes clutter a minimalist design or become redundant. WooCommerce typically adds breadcrumbs via an action hook.

Solution: Removing Breadcrumbs via PHP Hook

The most robust way to remove WooCommerce breadcrumbs is by unhooking the function responsible for displaying them. This should be done in your theme's functions.php file, preferably within a child theme to ensure updates don't overwrite your changes.

1. Access your WordPress site's files via FTP/SFTP or your hosting provider's file manager.
2. Navigate to your child theme directory (e.g., wp-content/themes/your-child-theme/).
3. Open the functions.php file for editing.
4. Add the following PHP code:

add_action( 'init', 'remove_woocommerce_breadcrumbs' );
function remove_woocommerce_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
}

This code ensures the breadcrumbs are removed before the main content area is rendered.

2. Hiding Product Meta (SKU, Categories)

The SKU (Stock Keeping Unit) and product categories are crucial for inventory, but “SKU: N/A Category Uncategorized” can appear unprofessional or unnecessary to customers. Hiding these elements creates a cleaner product description area.

Solution: Hiding Product Meta via PHP Hook

Product meta is added via an action hook. Removing this hook is effective.

1. Open your child theme's functions.php file.
2. Add the following PHP code:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

This line removes the default WooCommerce function that displays the SKU, categories, and tags on the single product page.

Alternative Solution: Hiding Product Meta via Custom CSS

For a quick visual hide without altering PHP, CSS can be used. This method simply hides the elements visually but leaves them in the HTML structure.

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Customize > Additional CSS.
3. Add the following CSS code:

.product_meta .sku_wrapper,
.product_meta .posted_in {
    display: none !important;
}

Remember that exact class names might vary, so use your browser's developer tools for precise targeting.

3. Hiding “Additional information” and “Reviews” Sections (Product Tabs)

WooCommerce product pages often feature tabs for Description, Additional Information (attributes), and Reviews. If your products don't have attributes, or if you prefer to manage reviews elsewhere, these tabs can be removed.

Solution: Removing Product Tabs via PHP Filter

WooCommerce provides a filter hook to modify the array of product tabs.

1. Open your child theme's functions.php file.
2. Add the following PHP code:

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['additional_information'] ); // Remove the "Additional Information" tab
    unset( $tabs['reviews'] );                 // Remove the "Reviews" tab
    // unset( $tabs['description'] );          // Uncomment to remove the "Description" tab
    return $tabs;
}

This code snippet allows you to selectively remove any of the default product tabs by unsetting their array key.

Customizing the Checkout Experience: Express Payments vs. Standard Checkout

The final part of the forum query concerned replacing GPay/Amazon Pay buttons with a standard checkout button. Express payment options like Google Pay and Amazon Pay are designed for convenience, allowing customers to bypass traditional checkout forms. However, some store owners might prefer a more controlled, traditional checkout flow, or find these buttons visually intrusive.

Replacing Express Payment Buttons (GPay/Amazon Pay)

These buttons are typically added by specific payment gateway plugins (e.g., Stripe for Google Pay, or the Amazon Pay & Login plugin). Their display location (product page, cart page, checkout page) is usually configurable within the plugin's settings.

Solution 1: Disabling via Plugin Settings (Recommended)

The most straightforward and recommended method is to disable these buttons directly within the payment gateway plugin's settings.

1. From your WordPress dashboard, navigate to WooCommerce > Settings > Payments.
2. Locate the specific payment gateway (e.g., Stripe, Amazon Pay) that is displaying the express payment buttons.
3. Click on “Manage” for that gateway.
4. Look for options related to “Express Checkout”, “Payment Request Buttons”, “Enable on Product Page”, or “Enable on Cart Page”.
5. Uncheck or disable these options and save your changes.

This method ensures the buttons are properly integrated or removed according to the plugin's intended functionality.

Solution 2: Hiding via Custom CSS (Fallback)

If plugin settings don't offer the desired granularity, or as a quick temporary fix, CSS can hide these buttons. However, be aware that this only hides them visually; the underlying elements remain in the HTML.

1. Go to Appearance > Customize > Additional CSS.
2. Add CSS to target and hide the express payment button containers. The exact class names can vary. You'll need to use your browser's developer tools (right-click > Inspect) to find the correct selectors. Common selectors might include:

/* Example selectors - inspect your site for exact classes */
.wc-block-components-express-payment-methods,
.woocommerce-checkout-payment-methods__button-group,
.stripe-button-container,
.amazon-pay-button-container {
    display: none !important;
}

Identify the parent container or specific button classes for GPay and Amazon Pay on your site and apply display: none !important; to them.

Conclusion and Best Practices

The “few cart questions” forum topic underscores a common theme in WooCommerce management: the need for fine-grained control over the storefront. By leveraging WooCommerce hooks (actions and filters) and targeted CSS, store owners and developers can tailor their sites to meet specific design and user experience goals. Hiding redundant information and controlling payment gateway displays contributes to a cleaner, more professional, and potentially higher-converting online store.

Always implement these customizations within a WordPress child theme to safeguard your changes during theme updates. Furthermore, thoroughly test all modifications in a staging environment before deploying them to your live site. This proactive approach ensures stability and a seamless experience for your customers, transforming common support queries into opportunities for optimization.