Site logo

Archived topic

Remove the Default Sorting on WooCommerce

19 replies · Started by Harvey on February 17, 2022

Viewing posts 1–15 of 20

Hi,

I am using the Site Library Capital and I have added WooCommerce in it. In the product page, there is a default sorting drop down menu as shown in the screenshot attachment.

Default Sorting DropDown

Would you please tell me how I can remove this drop down menu?

Thank you and I look forward to your reply.

Regards,
Harvey

Hi Harvey,

The quick and easy way is by hiding it with CSS -

form.woocommerce-ordering {
    display: none;
}

But it's still there, just hidden.

If you wish to completely remove this, you'll need PHP snippets to unhook it.

WooCommerce plugin adds this by default through this - https://github.com/woocommerce/woocommerce/blob/3611d4643791bad87a0d3e6e73e031bb80447417/plugins/woocommerce/includes/wc-template-hooks.php#L77

We can just unhook it with this php snippet - remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

Here's how to add PHP - https://docs.generatepress.com/article/adding-php/

Hi Elvin,

Thanks for your prompt reply. Your PHP code snippet is working properly.

I have another question about the woocommerce display on the same page http://testf.chans.cloud/product-category/catb/

Screenshot Attachment

Question A: Is there anyway to remove the "Home / CatB" and "Showing the single result"?

Question B: Is there anyway to center the TestB1 product name and remove the below "Read More" button?

Thank you very much and I look forward to your reply.

Regards,
Harvey

hello
try this CSS
remove the “Home / CatB”

.woocommerce .woocommerce-breadcrumb {
display: none;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2, .woocommerce ul.products li.product .woocommerce-loop-category__title {
font-weight: normal;
text-transform: none;
line-height: 2.5ex;
height: 5ex;
overflow: hidden;
font-size: 20px;
}

Hi Harvey,

In addition to Kobi’s response, here are some alternatives:

To remove the breadcrumbs, here is a PHP code:

PHP

add_action('template_redirect', 'remove_shop_breadcrumbs' );
function remove_shop_breadcrumbs(){
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
}

To remove the results count:

PHP

add_action( 'init', 'bbloomer_delay_remove_result_count' );
  
function bbloomer_delay_remove_result_count() {
   remove_action( 'woocommerce_after_shop_loop', 'woocommerce_result_count', 20 );
   remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
}

To remove the read more/add to cart buttons:

PHP

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');

To center the product title:

CSS

h2.woocommerce-loop-product__title {
    text-align: center;
}

Hope these help! :)

Fernando and Kobi,

Thank you very much for your help.

Fernando:

May I ask you more on the third and fourth part, "To remove the read more/add to cart buttons" and "To center the product title", are they php code that I need to add in the PHP Code snippet or they are CSS code?

Thank you again and I look forward to your reply.

Regards,
Harvey

Hi there,

i just added some titles above each of the code snippets.
The first 3 are PHP.
The 4th is CSS

Hi All,

Thank you for your help.

I have another two questions regarding to the above issue.

The read more buttons remain inside the Product Category Page, while I would like to remove them. Please check the link here "http://testf.chans.cloud/product-category/catb/"

For the shop page, is there any possibility to make the title of each category to be Center? Please check the link here "http://testf.chans.cloud/shop/"

Hi Harvey,

With regards to removing the Read more button on Product Archive pages, here is a CSS you can try:

.archive.woocommerce-page.woocommerce-shop .post-block .wp-block-post-excerpt {
    display: none;
}

With regards to aligning the product title in Product category pages:

.archive.woocommerce-page.woocommerce-shop h2.woocommerce-loop-category__title {
    text-align:center;
}

Both are CSS.

Hope this helps! :)

Hi Fernando,

For your code of removing the Read More button on Product Archive page,

I have added it in, but the Read more button is still there. Please check out the link http://testf.chans.cloud/product-category/catb/

Thanks and I look forward to your reply.

Regards,
Harvey

Can you try this CSS instead?

.archive.woocommerce-page .post-block .gb-container .wp-block-post-excerpt {
    display: none;
}

Here is how it looks like from my end: https://share.getcloudapp.com/NQux2NPp

Kindly let us know how it goes. :)

Hi Fernando,

The problem has been solved. Thank you.

Regards,
Harvey

.

This archived topic is closed to new replies.