Show all variants on product page

[Lqq]

I want to display the names of all the variants directly on the product page instead of having to drop down to select.

Since the variant name is very long, if the display mode is selected as “label”, all the names will be stacked together.

Is there a way to directly display all variant names?

[Harry]

Hi Lqqq,

Thank you for choose our theme, please change name to label and add below code to claue > theme option > general layout > custom CSS

.swatch__list--item {
	margin: 3px;
	border-radius: 5px;
	padding: 2px 10px;
}
.swatch__value {
	display: inline-block;
	width: auto;
	height: 24px;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Lqq]

Hi Harry,

thanks for your help.

I have pasted the code and it works, but the fork× of the out-of-stock variant is too big, can it be fixed?

In addition, can the variants that are not available be hidden? Because after selecting the first variant, some options in the second variant do not exist.

Look forward to your reply.

[Lqq]

And the colour variant on the product list shows the frame.
The colour variant on the product page cannot display properly.

Pls check the attachment, thanks.

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

I’m sorry please change code to

.is-label .swatch__list--item {
	margin: 3px;
	border-radius: 5px;
	padding: 2px 10px;
}
.is-label .swatch__value {
	display: inline-block;
	width: auto;
	height: 24px;
}

Can you send me some product has variation not exist to check.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Lqq]

This reply has been marked as private.

[Harry]

This reply has been marked as private.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Lqq]

This reply has been marked as private.

[Harry]

Hi,

The issue because you enable catalog mode, please go to Theme Option > WooCommerce > General Settings > Enable Catalog Mode > Off https://prnt.sc/trkcdw

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Lqq]

Thanks for your help, it works.

[Author]

Posts