[Resolved] Styling for variables on shopping page

[Daan van]

Hello Tom and Leo!

I have a small styling issue. On my page https://www.cribster.nl/shop/ I’ve managed to add the selector of the variables on that page, so my customers don’t have to go to the single product page to select the size of the item. I did this by adding this snippet to the php (with the snippet plugin)

add_action( ‘woocommerce_before_shop_loop’, ‘handsome_bearded_guy_select_variations’ );

function handsome_bearded_guy_select_variations() {
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_single_add_to_cart’, 30 );
}

This is all grand, but would like to remove the lines around the dropdown and the tag “maat” and in general reduce the size, so that it would be possible to display 2 products next to each other in mobile view without the dropdown menu’s overlapping each other.

I’ve tried to combat this with my very limited CSS knowledge, but no luck. Do you know a solution?

So, on the shop page I want the new dropdown menu’s per product to be smaller and/or without lines around it, so they sit nicely next to each other on mobile view with two columns of products.

Thanks again, love your expertise and lovely service every step of the way. Keep up the good work!

[Leo]

Hi there,

Try this CSS to remove the borders:

.post-type-archive-product table, 
.post-type-archive-product td,
.post-type-archive-product select {
    border: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Daan van]

I missed your reply completely…But, another great and easy fix. Daan zero, Leo 10 :).

One follow up. Is it possible to add products to the cart without jumping back to the top of the page? (AJAX isn’t it?)

It is especially annoying for mobile shopping. Will be forever in your debt.

[Leo]

Can you try Dashboard > WooCommerce > Settings > Products > Display > Add to cart behaviour > Uncheck Enable AJAX add to cart buttons on archives?

[Daan van]

Hey Leo!

Unfortunately it wasn’t that easy :(. I’ve tested it together with the Woo helpdesk and found out two things. Firstly, my website, when running GP, does not support AJAX in de shop. We’ve tested it with the Storefront Theme on a simple product, where it does work. Secondly, the PHP snippet I’ve send you doesn’t support AJAX (also not in Storefront).
Any thoughts?

[Leo]

Hmm that doesn’t sounds right. Before I unchecked that option, the page refreshed when I add something to the cart, and when I unchecked it no longer refreshes anymore.

I’ll ask Tom to confirm.

[Tom]

Are we talking about the shop page?: http://demo.generatepress.com/shop/

Or single product pages?

[Daan van]

Hey Tom and Leo, golden duo.

We are talking about the shop page.
I’ve now UNCHECKED The AJAX box in WC as requested (in Storefront it is the other way around right? AJAX checked means loading on page?).

Either way, on page loading for simple products doesn’t function on my shop page (tested with a test product, since I don’t sell simple products) AND it doesnt work on my variable products that I do sell directly from the shop page (using the custom PHP snippet). It doesn’t function with and without the AJAX function checked. Any idea what I’m missing? Thank you so much!

[Tom]

Does it work with a non-variable product? Perhaps it’s a limitation in WC?

[Daan van]

It does with the Storefront theme, but not with GP.
I tried it on a simple product and it jumps back to the top after clicking “add to cart”.

[Tom]

Is your shop functioning differently from our demo?: http://demo.generatepress.com/shop/

The actual shop page AJAX seems to be working fine.

GP itself doesn’t alter core WC functionality – it only styles it.

[Daan van]

So super strange. I’ve disabled all my php snippets and left AJAX ON, and it worked! (so of course nothing is wrong with your theme, as always).

Even though it didn’t work last time with only this snippet deactivated, it does now!:

add_action( ‘woocommerce_before_shop_loop’, ‘handsome_bearded_guy_select_variations’ );

function handsome_bearded_guy_select_variations() {
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_single_add_to_cart’, 30 );
}

So the problem is within this snippet I presume. Thank you for your time and effort as always! If you would know a line of php that would allow AJAX to work with this function it would be SUPER SUPER GREAT, but I’ll understand if you think, nah, this goes way beyond my scope.

Thanks:)!

[Tom]

Perhaps try this instead:

add_action( 'woocommerce_before_shop_loop', 'handsome_bearded_guy_select_variations' );

function handsome_bearded_guy_select_variations() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 30 );
}

You were unhooking the regular add to cart, and hooking in the single product add to cart, which doesn’t have AJAX.

[Daan van]

This didn’t do the trick, but thank you anyway for all the effort put into it!

[Tom]

No problem – do you have something working now?

[Author]

Posts