Variation swatches with description boxes

Resolved akselbf
(@akselbf)

5 years, 12 months ago

Hi

I am currently trying to build a WordPress version of my website. I am defininately not skilled at coding, so i would appreciate it if anyone has a solution to my issue that requires minor coding.

I sell used products of different sizes and gradings of prior usage.For the usage-grading i have 3 available variants which is: used condition, good condition and perfect condition. Right now these are shown to the customer via a drop-down menu. I want it to show something a bit more advanced. I know how to make swathces with a plugin but i need a bit more than just that.

I want a info-box underneath the variants on the product page that shows specific info about the condition-variant that the customer has clicked on. So if a customer clicks on “Used condition” a little box will appear underneath the swatch which will showcase information about the “used condition”. For example: “Might show signs of use such as scrathes or dents but it is fully functional and has a 2 year warranty.

Thanks in advance

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support Fernando a11n
(@fhaps)

Automattic Happiness Engineer

5 years, 12 months ago

@akselbf I’m thinking you can make use of the default product variation description, which will only be displayed once a variation is selected.

This is the description I’m referring to, which is configured inside each variation:

When you select a variation on the product page, that description will be displayed. And it will change whenever you change your variation selection.

On my site I have the Variation Swatches and Photos, and I confirmed this works. This is how it looks for customers:

I hope that helps!

Thread Starter akselbf
(@akselbf)

5 years, 12 months ago

Wow thanks for the great answer.

I really want to make it into a box form with a colored outline. How do i do that. Would it be possible to insert some sort of code into the variant description?

Thread Starter akselbf
(@akselbf)

5 years, 12 months ago

Also my products will have 3 different variables (size, color and condition)

Therefore i want the info box to appear as soon as you click on “condition” variant, even though you havent selected color and size yet.
Plugin Support Fernando a11n
(@fhaps)

Automattic Happiness Engineer

5 years, 12 months ago
I really want to make it into a box form with a colored outline. How do i do that.

That’s something that would require some level of code customization, perhaps through CSS.

I’m not a CSS expert, but I believe this code will work in making it look more of a notice:
```
div.woocommerce-variation.single_variation {
  background:#AB3016;
  color:#ffffff;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:3px;
}
```
Just change the HTML color codes for the background and color elements, to control what colors you want the box and font to appear in.

This worked on my own site:

Therefore i want the info box to appear as soon as you click on “condition” variant, even though you havent selected color and size yet.

In this case, the description I showed you above will most likely not work for you. The description is only displayed once a variation has been selected – and that only happens once all the options have been chosen.

I don’t know of a plugin that adds the functionality you described, exactly as you listed it. I’m inclined to believe you’ll need a custom-code solution for your site.

I’m going to leave this thread open for a bit to see if anyone is able to chime in to help you out with either plugin or code suggestions.

I can also recommend the following places for more development-oriented questions:
1. WooCommerce Slack Community: https://woocommerce.com/community-slack/
2. WooCommerce FB group: https://www.facebook.com/groups/advanced.woocommerce/
Good luck!
Plugin Support Fernando a11n
(@fhaps)

Automattic Happiness Engineer

5 years, 11 months ago

We haven’t heard back from you or other users in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Variation swatches with description boxes’ is closed to new replies.