Archived topic
Remove the Default Sorting on WooCommerce
19 replies · Started by Harvey on February 17, 2022
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.
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 there,
Little tough to tell without seeing the site live.
It looks like the right sidebar widget though.
Can you try setting the sidebar layout to content only in the customizer?
https://docs.generatepress.com/article/woocommerce-overview/#shop
Let me know :)
Hi Leo,
Please check the Default Sorting list in the link below. I would like to know how I can remove the list
http://testf.chans.cloud/product-category/catb/
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/
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
.