[Resolved] Woocommerce variation names not centered

This topic contains 12 replies, has 2 voices, and was last updated by  Andrew Misplon 3 months ago.

  • Author
    Posts
  • #11111

    danny weiss
    Participant

    Hi again,

    I’ve discovered a new issue, it’s about the way that products’ variation names are displayed on a Woocommerce website. They are not centered, as they should be, and this provides an unprofessional look on the product page. Below I’ve added some screenshots so you can get an idea of what I mean:
    https://ibb.co/jLSPrjF
    https://ibb.co/rkqhYw7

    🙂

    #11112

    Andrew Misplon
    Keymaster

    Hi Danny 🙂

    Can you perhaps send links to the pages concerned? I can’t currently replicate the problem, here is an example: https://demo.purothemes.com/polestar/product/hoodie/.

    #11115

    danny weiss
    Participant
    This reply has been marked as private.
    #11119

    Andrew Misplon
    Keymaster

    Thanks. There are other plugins adding their own styling here which complicates matters. Try the following inserted at Customize > Additional CSS or the Custom CSS location of your choosing:

    .wvas_variations td.label {
    	vertical-align: middle !important;
    }
    
    .wvas_variations td.label {
    	font-size: 16px;
    }
    
    .single .woocommerce-variation-add-to-cart {
    	margin-top: 35px;
    }
    
    .woocommerce.single .product .summary .price {
    	margin-bottom: 0 !important;
    }
    #11120

    danny weiss
    Participant
    This reply has been marked as private.
    #11121

    Andrew Misplon
    Keymaster

    Thanks for the feedback. Please try adding:

    .single-product td.value {
    	padding: 20px !important;
    }

    After our other rules. Any better?

    I’ll look at accommodating the plugins you’re using here in the next update. Thanks again.

    #11122

    danny weiss
    Participant

    Unfortunately no, it didn’t change anything…
    Also here’s how it looks on mobile: https://ibb.co/Kcng5P1

    #11123

    Andrew Misplon
    Keymaster

    Hi Danny. The last rule I sent is being applied as I intended it to. It isn’t the same as before, the variation images, that cell now has padding. Let me know how you’re wanting Baby Bath Magic Flower variations to display and I’ll do what I can to assist.

    On mobile, are you asking about the grey field that’s protruding on the right of your screenshot? If so, I can’t recreate that on my phone or using any of the devices available in Chrome’s Developer tool.

    #11124

    Andrew Misplon
    Keymaster

    To move the Color label slightly further up, you can try removing the previous rule I sent and replacing it with:

    .single-product td.value {
        padding: 20px 20px 0 20px !important;
    }
    #11125

    danny weiss
    Participant

    Yes, I’m trying to get the variation label to go higher, but if I use that last piece of code, all other labels, which were previously fixed, move up.
    I attached the mobile screenshot because, compared to the pc version, you can see much clearer how bad the variation title is positioned.

    #11127

    Andrew Misplon
    Keymaster

    Thanks. Please, try removing only the previous rule which is:

    .single-product td.value {
        padding: 20px 20px 0 20px !important;
    }

    And then add:

    .woocommerce .product .summary .variations .reset_variations[style*="visibility: hidden"] {
    	display: none !important;
    }
    #11137

    danny weiss
    Participant

    Yeeesss! It worked, mistery solved. I can’t thank you enough!
    I owe you a beer (at the very least) whenever you happen to be in my country, Romania. 🙂 🙂

    #11138

    Andrew Misplon
    Keymaster

    Super, glad to hear that helped 🙂 Sorry we couldn’t get there earlier.

    Chat soon 🙂

    Cheers!

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

You must be logged in to reply to this topic.

Scroll to top