Modify the WooCommerce Shop page

The typical shop page will look something like this:
(Example using the theme Twenty Twenty Two.)

Shop page WooCommerce WordPress
Shop page WooCommerce.

Remove “Showing all x results” and sorting drop down.

/* Remove sorting result "Showing all x results". */
remove_action('woocommerce_before_shop_loop', 'woocommerce_result_count', 20);

// Remove sorting drop down.
remove_action('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);

The WooCommerce Shop page contains the following hooks

woocommerce_before_main_content
woocommerce_archive_description
woocommerce_before_shop_loop
woocommerce_before_shop_loop_item
woocommerce_before_shop_loop_item_title
woocommerce_shop_loop_item_title
woocommerce_after_shop_loop_item_title
woocommerce_after_shop_loop_item
woocommerce_after_shop_loop
woocommerce_after_main_content

From: tychesoftwares: Woocommerce shop page hooks visual guide with code snippets

Taking methods from Single Product page and using them here.

Adding text and link after the Shop page title.

/* Adding a custom text and link just after the page title.  */
add_action( 'woocommerce_archive_description', 'woo_text_link', 20 );

function woo_text_link() {
	echo( '<p>Some text here. <a href="#" class="custom-text">A custom link!</a></p>');
}

Add the CSS to the class “custom-text”.

/* CSS class added to the above code. Can be styled in the style.css file. */
.custom-text {
 	color: red;
 }

The result of removing “Showing all x results”, sorting drop down and adding custom text and a link.

Result: Shop page removed results, sorting and custom text and link.
Result: Shop page removed showing all results, sorting and custom text and link.

Remember to check out the Single Individual Product page tutorial for additional tips that can also be transferred over to the Shop page.

Adjust “Add to cart” text.

/* Change "Add to cart" text. Almost the same filter is used from the single product page. https://www.businessbloomer.com/woocommerce-edit-add-to-cart-text-by-product-category/ */
add_filter('woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text');
 
function custom_add_to_cart_text() {
return __('Shop: Buy Now', 'woocommerce');
}

Change “Add to cart” button text based on product category.

add_filter( 'woocommerce_product_add_to_cart_text', 'bbloomer_archive_custom_cart_button_text' );

function bbloomer_archive_custom_cart_button_text() {
global $product;
    if ( has_term( 'Books', 'product_cat', $product->ID ) ) {
    return 'Add a book';
    } elseif ( has_term( 'Movies', 'product_cat', $product->ID ) ) {
    return 'Add a movie';
    } else {
	return 'Add to cart';
    }
}

Additional resources:

https://www.businessbloomer.com/woocommerce-remove-rename-add-default-sorting-options-shop/

https://www.businessbloomer.com/woocommerce-edit-add-to-cart-text-by-product-category/

Share the article:

Leave a Reply

Your email address will not be published. Required fields are marked *