Swatch sizes and Shop Swatch Area – need help

  • Resolved yatgirl

    (@yatgirl)


    1 year, 7 months ago

    I am having trouble with 2 items below

    1. SMALL SWATCH ON SHOP PAGE, LARGE SWATCH ON PRODUCT PAGE
      I would like a 40px swatch on the product page
      and a 24 px swatch on the shop/category page

    I have tried different variations of settings with no luck. I am getting the 40px swatch on both the product page and the shop/category page
    I think the issue is that on the shop category page styling settings – there is only a minimum width and not a maximum width

    I have clicked off override global settings and put 24 px on your Shop Page Styling settings page
    On the wocommerce attribute page – the setting is 24
    on your global settings page – the swatch minimum width is 40

    Do I need to change a setting, or is what I am wanting not possible ?

    1. Remove background color on swatch area on shop category page
      I would like to remove the background color on the swatch area on the shop page.
      I want it just the same color as the page.
      See dropbox pic here for clarification
      https://www.dropbox.com/s/xtn541iljoaq5qu/cartflow%20shop%20page%20background.png?dl=0

    Is there some css code that will remove the color on the shop category page ?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Shravan Bhaskaravajjula

    (@bhshravankumar)

    Hello @yatgirl,

    You can show different sizes for the shop page and product page, you can change the settings on our plugin settings.

    Please share your website URL so that we can look into the issue and provide you custom CSS to hide the background color.

    Thread Starter yatgirl

    (@yatgirl)

    https://dogshoppe.net/product-category/dog-breeds/airedale-terrier/

    Theme Storefront, child theme boutique

    —

    Re different sizes – I read somewhere in another thread the different sizes only work if you choose the ‘default’ image option. (cant find it now, that was a week ago and had given up on anyone answering here) This has also been my experience. I had wanted large circles on the product page and small circles on the category page, but I only get different sizes if I choose default – which gives rounded swatches on the category page and rounded square swatches on the category page. If its possible, I cant get it to work.

    Plugin Support Aamir

    (@aamiribsf)

    Hello @yatgirl,

    Thanks for writing back.

    To get the different-size swatches on the product and shop page, please follow the steps in the screen recording:https://d.pr/v/nmYWLB.

    Regarding removing the background color on the shop page, please try this CSS.

    table.cfvsw-shop-variations.variations tr td
{
  background-color:transparent!important;
}

    If you’re not sure how to use this custom CSS, please refer to the following article on our knowledge base:

    How and Where to Add the Custom JS, CSS & PHP Codes?

    Hope this helps.

    Let me know how it goes.

    Thread Starter yatgirl

    (@yatgirl)

    Thank you – the custom css to take out the background on the category page works. Thanks again.

    Plugin Support Aamir

    (@aamiribsf)

    Hello @yatgirl,

    Glad that it helped.

    Have you checked the screen recording? Were you able to follow the same.

    Let me know how that goes.

    Looking forward to hearing from you.

    Thread Starter yatgirl

    (@yatgirl)

    Re Video – Yes Thank you ! – it was the border radius setting I had incorrect. (I didnt realize what it did.)

    Final Question – I was also wondering if there is CSS to make the selected swatch ‘border’ thicker/bolder ? so it is really noticeable. Please see dropbox screenshot

    https://www.dropbox.com/s/dsmo4o7lk97rkx3/selected%20border%20thicker.jpg?dl=0

    Plugin Support Aamir

    (@aamiribsf)

    Hello @yatgirl,

    Thanks for writing back.

    Please try this CSS code

    .cfvsw-swatches-option.cfvsw-selected-swatch 
{
    border: 2px solid var(--cfvsw-swatches-border-color-hover, #00000090 ) !important;
}

    Feel free to change the border width in the code according to your need. Currently, it is 2px.

    I hope this helps. Looking forward to hearing from you.

    Thread Starter yatgirl

    (@yatgirl)

    Perfect ! Thanks so much !

    Plugin Support Aamir

    (@aamiribsf)

    Hello @yatgirl,

    You’re most welcome!

    If you have more questions, please don’t hesitate to raise a new thread!?

    Have a great day ahead ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Swatch sizes and Shop Swatch Area – need help’ is closed to new replies.