Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Styling for variables on shopping page

Home Forums Support Styling for variables on shopping page

  • This topic has 22 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #399801
    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!

    GP Premium 1.4.3
    #400044
    Leo
    Staff
    Customer Support

    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/

    #401220
    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.

    #401398
    Leo
    Staff
    Customer Support

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

    #404644
    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?

    #404981
    Leo
    Staff
    Customer Support

    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.

    #405043
    Tom
    Lead Developer
    Lead Developer

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

    Or single product pages?

    #405617
    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!

    #405899
    Tom
    Lead Developer
    Lead Developer

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

    #408336
    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”.

    #408796
    Tom
    Lead Developer
    Lead Developer

    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.

    #408941
    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:)!

    #409251
    Tom
    Lead Developer
    Lead Developer

    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.

    #412910
    Daan van

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

    #413258
    Tom
    Lead Developer
    Lead Developer

    No problem – do you have something working now?

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.