Home Forums Themes Support Claue Show all variants on product page

Tagged: 

Viewing 4 reply threads
  • Author
    Posts
    • #37772
      Lqq
      Supported

      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?

    • #37784
      Harry
      Supported

      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

      • #37797
        Lqq
        Supported

        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.

      • #37798
        Lqq
        Supported

        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.
    • #37808
      Harry
      Supported

      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

      • #37824
        Lqq
        Supported
        This reply has been marked as private.
    • #37827
      Harry
      Supported
      This reply has been marked as private.

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

      • #37851
        Lqq
        Supported
        This reply has been marked as private.
    • #37852
      Harry
      Supported

      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

      • #37855
        Lqq
        Supported

        Thanks for your help, it works.

Viewing 4 reply threads

You must be logged in to reply to this topic.