Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #64857
    Patrick Reid
    Guest

    Hello,
    I am having some formatting layout issues on one of my product pages. For starters, the QTY text next to the drop-down is white and I cannot figure out how to change it to black. The qty buttons and add-to-cart buttons are misaligned and look sloppy. How can I edit this page and fix these issues? Thanks

    #65008
    Andy V
    Keymaster

    Hi Patrick,

    Thanks so much for reaching out and thank you for using Crio Pro WordPress theme!

    I took at what you had going on and I was able to recreate what you were seeing on your end and get a working solution for you. Since the buttons and quantity controls are generated by WooCommerce they wouldn’t be as easy as editing a page with our Post and Page Builder, which means we can fix this by adding some custom CSS.

    First you will need to access the custom CSS/JS editor on the Customize screen, and once you are there you can add the code below into the CSS section with copy and paste:

    Just to clarify, the minus button is white because the quantity is at 0. So to prevent the person on the page from adding a negative amount the button gets disabled which is why it’s white like that. I did however in the rule I provided make it so that the Minus Icon stands out a bit better for you and you can see the border of the button a little easier. You are more than welcome to change the background color or any other values in the snippet provided.

    I hope this helps! Please reach back out if there’s anything else that we can answer for you.

     

    • This reply was modified 1 year, 8 months ago by Andy V.
    #65119
    Patrick Reid
    Guest

    This is great. Thank you so much for taking the time to do this. One last thing I did not explain correctly. It is the text next to the choose option dropdown that is white on a white background so it cannot be read. If you highlight the area with your cursor you can see it. Does that make sense? Is there some custom CSS that can fix this? Screenshot at this link

    white QTY text cannot be seen

    #65565
    Brandon C
    Keymaster

    Hi Patrick,

    I just inspected one of your single product pages and it looks like you’ve already managed to get this CSS adjustment implemented. Please let us know if you still need assistance with this or if you have any other questions for us.

    #65652
    Patrick Reid
    Guest

    Hi Brandon,
    I did implement the css that Andy posted here but I still have the issue I posted above. The QTY text is white and I need it to be black so it is visible. I assume that is some more CSS?
    Thanks

    #65654
    Brandon C
    Keymaster

    Thanks Patrick!

    My apologies, I didn’t realize you were specifically referencing the quantity option. This bit of CSS here should clear that up for you:

    .woocommerce div.product form.cart .variations label {
        color: #000000 !important;
    }

    Hope this helps to clear things up for you Patrick!

    #65666
    Patrick Reid
    Guest

    Just what I needed thanks!

    #65805
    Brandon C
    Keymaster

    Awesome Patrick,

    I’m happy that worked for you. Let us know if there’s anything else we can answer for you!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Formatting issues in my WooCommerce Product Pages’ is closed to new replies.