Remove add to cart buttons on archive pages - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
November 14, 2020 at 12:32 am #1260418
fcp
Participant
Hi guys,

I’m trying to remove add to cart buttons on my archive pages.
I tried this function, which seems to work for everybody except me:
```
add_action( 'woocommerce_after_shop_loop_item', 'remove_add_to_cart_buttons', 1 );

    function remove_add_to_cart_buttons() {
      if( is_product_category() || is_shop()) { 
        remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
      }
    }
```
So there probably is a conflict with the theme.

Could you please help me on this?
Thanks a lot!

If needed, you can find a link and credentials to my website in private content.
Thanks a lot!
November 17, 2020 at 4:40 am #1260881

Rikard
Keymaster

Hey fcp,

Which pages in particular do you want to remove this from? I can’t see that an add to cart button is added to the category page, for example: https://kriesi.at/themes/enfold-shop/product-category/women/business-woman/

Best regards,
Rikard

November 17, 2020 at 3:16 pm #1261021

fcp
Participant

Hi Rikard,
Thanks for your reply.
Add to cart buttons are added to my shop, as you can see on the page in private content, no matter if I enable or disable the “Enable AJAX add to cart buttons on archives” option in WooCommerce settings (see screenshot: https://imgur.com/AfyqSFQ).
That’s the reason why I’m trying to add this function which doesn’t work with the theme.

November 21, 2020 at 10:32 pm #1262025
Mike
Moderator
Hi,
Sorry for the late reply, I added this function to your functions.php which seems to work, please check.
```
add_action( 'woocommerce_after_shop_loop_item', 'remove_add_to_cart_buttons', 1 );

    function remove_add_to_cart_buttons() {	
		if( is_product_category() || is_shop()) {
	remove_action( 'woocommerce_after_shop_loop_item', 'avia_add_cart_button', 16);
	}
}
```
Best regards,
Mike
December 14, 2020 at 12:31 am #1266966

fcp
Participant

Hi Mike,
Thanks for your reply.
Indeed, it works. But in fact I’m trying to remove “Add to cart” button only, but with keeping the “Show details” button.
Is there a way to customize your previous code to achieve this?
Thanks a lot!

December 14, 2020 at 2:28 pm #1267152

Mike
Moderator

Hi,
Thanks for the feedback, I rechecked the “\enfold\config-woocommerce\config.php” file and found that the “add to cart” function includes the “show details” function. Unfortunately, I don’t see how to hide one and not the other.
I did find this plugin: MMWD Remove Add To Cart for WooCommerce that may be worth a try. Otherwise, I will ask the rest of the team for ideas. Perhaps I could do this with css, but I feel you would prefer using a function?

Best regards,
Mike

December 15, 2020 at 2:14 am #1267323
fcp
Participant
Hi Mike,
Thanks a lot for the inquiry.

I tried this plugin and it allows to remove Add to cart everywhere on a WooCommerce installation, but it also makes products not buyable. So it could not be a solution.

If this is not possible using a function, I already found a css solution with this code:
```
.archive .product-type-simple .button, .archive .product-type-simple .button-mini-delimiter {visibility: hidden;}
.archive .product-type-simple .show_details_button {visibility: visible!important; min-width: 100%!important; margin-left: -50%!important;}
}
```
It works great and I’m trying to do the same with my slider on homepage adding this in my previous code:
```
.archive .product-type-simple .button, .archive .product-type-simple .button-mini-delimiter, .avia-content-slider-inner .product-type-simple .button, .avia-content-slider-inner .product-type-simple .button-mini-delimiter {visibility: hidden;}
.archive .product-type-simple .show_details_button, .avia-content-slider-inner .product-type-simple .show_details_button {visibility: visible!important; min-width: 100%!important; margin-left: -50%!important;}
}
```
…but I don’t know why there are many display issues. On my phone for example, buttons are displayed many times (see screenshot in private content). Or sometimes, there is an issue with buttons on hover (see video in private content). The slider behavior is quite strange compared to archive pages :-(

Furthermore, I modified “Select options” buttons text to make it the same as “Show details” buttons, but do you know what is the solution to modify their icon? (by default, the icon is the shopping cart)

Thanks a lot, Mike!
December 18, 2020 at 2:40 pm #1268415
Mike
Moderator
Hi,
Sorry for the late reply and thanks for the video, on your homepage slider, and on first load, the buttons seem to be overlapping each other:

this image includes “Ajouter au panier” & “Voir les détails” as seen here in the source code of the page:

Yet this only seems to occur on first load of the slider, once the slider rotates the new products the buttons don’t seem to overlap, for example this is the same product before and after the slider rotates, I used the slider arrows to go back to the same product:

I believe that this might be due to a conflict in the use of “visibility” which the slider is also using to cycle though the products and for the hover effect.
I notice that your css is targeting the class “product-type-simple” but this is not a class that every item has, and your css is also hiding the class “button” without specifically pointing to which the button to hide.
OK, so perhaps using “display: none” instead of “visibility: hidden” and use “:not(.show_details_button)” to only target the add-to-cart button, like this:
```
 #top.home .avia-content-slider-inner .button:not(.show_details_button) {display: none !important;}
```
Please note that when you use “display:none” the space it uses is also removed, so you won’t need to use the “margin-left: -50%!important;” css to move the “show_details_button”.
So please review your css for the buttons and model this.

Best regards,
Mike
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.