Streamlining WooCommerce: A Guide to Hiding Elements and Customizing Checkout

Optimizing the user experience on an e-commerce platform like WooCommerce often involves refining the visual presentation of product and cart pages. Store owners frequently seek to declutter layouts, remove redundant information, or streamline the checkout process to improve conversion rates. The recent discussion on the WordPress support forum, titled "few cart questions", perfectly encapsulates these common requirements, highlighting specific pain points regarding unwanted text, metadata, and payment button visibility.

The user's questions revolved around hiding various elements on product and cart pages, including breadcrumb-like "Home/Uncategorized" text, "SKU: N/A Category Uncategorized" details, and entire sections like "Additional information" and "Reviews." Furthermore, there was an inquiry about replacing express checkout buttons like GPay/Amazon Pay with a standard checkout button. As a WooCommerce migration expert and community analyst, let's break down these challenges and provide actionable solutions.

Hiding Unwanted Text and Metadata on WooCommerce Pages

The request to hide "Home/Uncategorized text messaging" and "SKU: N/A Category Uncategorized" points to a desire for a cleaner, more focused product display. These elements often appear as part of breadcrumbs or product meta information. There are two primary methods to address this: CSS for visual hiding, and PHP hooks for programmatic removal.

1. Hiding with Custom CSS

For elements that you simply want to disappear from the visual layout without completely removing them from the page's structure, CSS is the simplest approach. This is often suitable for breadcrumbs or product meta if they are not critical for SEO or functionality.

Instructions for Adding Custom CSS:

• Navigate to Appearance > Customize in your WordPress admin dashboard.
• Click on Additional CSS.
• Paste the following CSS code into the editor.

To hide SKU and Category information:

/* Hide SKU on product pages */
.product_meta .sku_wrapper {
    display: none;
}
/* Hide Category on product pages */
.product_meta .posted_in {
    display: none;
}

To hide specific breadcrumb text (e.g., "Uncategorized"):

/* Hide 'Uncategorized' link in breadcrumbs */
.woocommerce-breadcrumb a[href*="/product-category/uncategorized/"] {
    display: none;
}
/* Hide 'Home' link if desired (adjust selector as needed) */
.woocommerce-breadcrumb a[href*="/shop/"] {
    display: none;
}
/* Potentially hide separators if they become orphaned */
.woocommerce-breadcrumb span:empty {
    display: none;
}

Note: CSS only hides the elements visually. They remain in the HTML structure. For more robust removal or if CSS doesn't fully achieve the desired effect (e.g., if "Uncategorized" is part of a title), PHP hooks are preferred.

2. Removing with PHP Hooks

For a cleaner backend approach, especially for SKU, PHP hooks can prevent the information from being generated at all.

Instructions for Adding PHP Code:

• It is crucial to use a child theme to add custom PHP. This ensures your changes are not overwritten during theme updates.
• Access your child theme's functions.php file via FTP/SFTP or your hosting provider's file manager.
• Add the following code to the end of the functions.php file.

To completely disable SKU display:

add_filter( 'wc_product_sku_enabled', '__return_false' );

Removing "Additional Information" and "Reviews" Sections

The "Additional information" and "Reviews" sections are typically displayed as tabs on single product pages. WooCommerce provides a convenient filter to manage these tabs.

Instructions for Removing Product Tabs:

• As with other PHP modifications, use a child theme's functions.php file.
• Add the following code:

add_filter( 'woocommerce_product_tabs', 'remove_woocommerce_product_tabs', 999 );
function remove_woocommerce_product_tabs( $tabs ) {
    unset( $tabs['additional_information'] ); // Remove the "Additional information" tab
    unset( $tabs['reviews'] );                // Remove the "Reviews" tab
    return $tabs;
}

This code snippet targets the woocommerce_product_tabs filter, allowing you to unset (remove) specific tabs by their unique identifiers (additional_information and reviews). The priority 999 ensures this filter runs late, overriding most other modifications.

Replacing GPay/Amazon Pay Buttons with a Checkout Button

The user's final question about replacing GPay/Amazon Pay buttons with a standard checkout button is a common request for simplifying the cart experience. These express checkout buttons are usually integrated directly by payment gateways (e.g., Stripe, PayPal, Amazon Pay) and are designed for quick purchases. The "checkout button" itself is the default button that proceeds to the standard WooCommerce checkout page.

The solution here is not to "replace" them with a checkout button (as the checkout button is already present), but rather to disable the express checkout buttons so that the standard checkout button becomes the primary and only visible option to proceed.

Instructions for Managing Express Checkout Buttons:

1. Access Payment Gateway Settings: In your WordPress admin, navigate to WooCommerce > Settings > Payments.
2. Configure Each Gateway: Click on the specific payment gateway you are using (e.g., Stripe, PayPal, Amazon Pay).
3. Locate Express Checkout Options: Within the settings for each gateway, look for options related to "Express Checkout," "Display on Cart Page," "Display on Product Page," or similar phrasing.
4. Disable Express Checkout: Uncheck or disable these options. For example, in Stripe settings, you might find options to disable "Payment Request Buttons" on the cart or product page. For Amazon Pay, you'd look for settings to control where the Amazon Pay button appears.
5. Save Changes: Remember to save your changes for each payment gateway.

By disabling these express checkout features directly within the payment gateway settings, the GPay and Amazon Pay buttons will no longer appear, leaving the standard "Proceed to checkout" button as the sole option, thus achieving the desired outcome.

Conclusion

The "few cart questions" topic from the WordPress support forum highlights how crucial small customizations are for enhancing the WooCommerce user experience. Whether it's decluttering product pages by hiding unnecessary metadata, streamlining the tabbed content, or simplifying the checkout path by managing express payment options, these adjustments contribute significantly to a polished and professional online store. Always remember to implement PHP changes within a child theme and thoroughly test all modifications to ensure compatibility and functionality. Leveraging these techniques empowers store owners and developers to create a more focused, user-friendly shopping journey for their customers.