Return to previous page

How to have multiple selection options on a product page?

This topic has 4 replies, 2 voices, and was last updated 12 months ago ago by Rose Tyler

GTP

Participant

November 26, 2023 at 00:33

Hello 8theme team,

How can we achieve something similar in regards to have multiple selection options on a product page?

For example, have a product such as a computer and then have multiple selection options to choose things like; the color, the RAM, storage, processors etc.

An example is provided on the PCA

Thanks for your help!

Please, contact administrator
for this information.

#374761 Copied Theme version: 9.2.3

3 Answers

Rose Tyler

Support staff

November 26, 2023 at 13:07

Hello, GTP,

Thank you for getting in touch with us.

Please watch this video about variable product and variation swatches – https://youtu.be/LgzC4iK-j6A?feature=shared

Kind Regards,
8theme team

#374807 Copied

GTP

Participant

November 27, 2023 at 04:00

Hi Rose,

Thanks for the video.

1) Can we add as many “choices” as we like per product? (in terms of color, size, and other selection options)

2) We noticed that some websites have the variable options set as boxes which we can click on and select, and others have a drop down menu to choose from. How can we select which one we would like for a specific product?

3) Do we have to set the attributes (color, sizes) from the Products -> Attributes section, or can this be done on the single product section itself (the video shows first having to go and make an attribute and then setting it up on the product page, versus doing everything on the product page itself)

3) What is the difference between attributes and variations on the product pages? We noticed on the video it goes to attributes. What would the variations be used for?

4) Is there anyway to change the images of the when we select a color from the options? So if someone for example choose the color green, all the images change to that color to show the customer.

5) Can we have the options lined up with the title of the selection choices? For example have the colors after the words “color” versus them being down after the words color (as in the demo; https://xstore.8theme.com/elementor/product/levis-neck-ringer/)

6) Can we change the placement of the “clear” button after all the options vs having it beside the last option of ‘size” as in this demo;

https://xstore.8theme.com/elementor/product/levis-neck-ringer/

7) Can we make the selection boxes of the options larger and can we change their sizes from a perfect rectangle box to something else like a circle or rectangle with soft corners?

8) Can we change the way the wording options appears for the “colors” section?

https://xstore.8theme.com/elementor/product/levis-neck-ringer/

Once you hover over the color green, the text shows up on the bottom and small and inside a rectangular box.

9) If we have multiple selection options, how do we restrict/make the other selection options to match that specific option? (detailed in PCA).

Thanks!

Please contact administrator
for this information.

#374850 Copied
Rose Tyler

Support staff

November 27, 2023 at 09:55
Hello, GTP,

1/ Yes, you can. Here is WooCommerce documentation about variable products – https://woo.com/document/variable-product/#:~:text=Variable%20products%20in%20WooCommerce%20let,small%20and%20in%20different%20colors.

2/ https://prnt.sc/neISASaUbPft – this is the default view. If you want to have it like this https://prnt.sc/gfBHZt6Ol2qD , then you need to enable Variation Swatches – https://youtu.be/LgzC4iK-j6A?feature=shared

3/ Two different product attributes are available in WooCommerce, local and global product attributes. In WooCommerce both options are called attributes, but there is a difference in the functionality of these attributes.
Global attributes: These are the properties that you will find in the WP-Admin under Product > Attributes. All attributes created here are at on a global website level and can be used with all products.
Local attributes: These attributes are created when you create or edit a product. You cannot use these attributes to filter and they are only visible on the product page itself.
You can use only global attributes for our variation swatches – https://youtu.be/LgzC4iK-j6A

3/ Attributes are used to create variations. Please contact the support of WooCommerce to get a further explanation, because it is their functionality.

4/ Yes, it is possible.
If you wish to modify all the images in a product when a color is selected, please follow the steps below:
1. Navigate to Xstore > Theme Options > Woocommerce > Single Product builder > Variation Gallery option.
2. Turn it ON and click on ‘Publish’.
Once this is done, proceed with the following steps:
1. Go to ‘product’ > Edit specific variable Product > variations.
2. Edit the variation and add gallery images.
3. Save the settings.
After completing these steps, please revisit your site to confirm the changes.

5/ Yes, depending on the builder that was used to create a single product page we can guide you.

6/ https://prnt.sc/ZYF_ge0Q06Z3 Yes, depending on the builder that was used to create a single product page we can guide you.

7/ Yes, it can be done using custom CSS code for soft corners, or just select circle here – https://prnt.sc/-J8iTy9VjYBD

8/ https://prnt.sc/n0a4AmqSna7Z
```
.type-color:after, .type-image:after, .sten-li-disabled:after {
    bottom: 60px !important;
    background-color: #222;
    color: white;
    padding: 10px 20px;
}
```
9/ Product variation that is ”Out of stock” can be displayed like this -http://prntscr.com/t21xou with our variation swatches (in case “Hide out of stock products from catalog” option is enabled in WooCommerce > Settings > Products > Inventory).

Kind Regards,
8theme team
#374882 Copied
Tagged: advanced woocommerce features, multiple selection options, optimizing product selection, product page customization, woocommerce templates, wordpress ecommerce
Viewing 4 results - 1 through 4 (of 4 total)