Support Center Visit Demo License manager Buy @ envato

Product color palette switching function

cnlianmeicnlianmei
in WooCommerce

I want to have product color selection on the product page like a demo website. Clicking on the color will automatically switch to another image, but the demo I imported does not include how to set it up and where to provide detailed tutorials. Additionally, I do not want to add it to the shopping cart function, just need directory mode. Can this function be implemented

Comments

  • PhilPhil

    Hello,

    1) You can directly set up different images for attributes in the product settings.

    image.png

    2) Sorry, but I do not understand the second part of your message. Can you explain greater what you want to achieve, please?


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • cnlianmeicnlianmei

    I just want to showcase the product and don't need to shop online, so I don't need to add it to the shopping cart. How should I set it up and which tool should I add?

  • PhilPhil

    Please go to Betheme -> Theme options -> Shop -> General, and enable the Catalog mode.

    image.png

    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • cnlianmeicnlianmei
    edited April 2023
    1.jpg

    I want “custom Variation Swatches”，But don't “cart” and “price display”

    2.jpg

    Because I only want to do product display, not online shopping, but after I open the “Catalogue mode”, the “custom Variation Swatches” is not available

  • PhilPhil

    Custom variation swatches are part of the button. With a custom CSS, you can hide add to cart button and leave variations only.

    If you need help with that, please attach a link to your website, and ensure that add to cart button is added to your template.


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • cnlianmeicnlianmei

    I have already sent my website address, backend, and FTP via email

  • PhilPhil

    You need to add a price to your variations because without it, you will not be able to choose between them and use the following CSS code:

    .single-product .cart .mfn-variations-wrapper ~ *{
 display: none;
}

    Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS. It will remove everything beyond variation swatches.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • cnlianmeicnlianmei
    3.png
    4.png
    1.png
    2.png
    http://ritay3.sg-host.com/products/e-balance-bike
    http://ritay3.sg-host.com/product/lme-bb2.html

    I have used your code, but it has no effect. The shopping cart and prices are still displayed. I hope that prices and shopping carts will not be displayed in both the list page and individual product pages, and I have added product color images, but they are not displayed. What is the reason for this?

  • PhilPhil

    I have corrected the previous code I sent on your website and added a new one regarding price. Please check it out.

    Also, the attributes you have does not have images selected. Please edit your attributes, and add images.

    image.png

    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • cnlianmeicnlianmei
    1.png
    3.png
    2.png

    Images of different colors have been added in the background, but there is no response after clicking. The displayed images will not automatically switch to the ones added in the background, only the main image of the product will be displayed

    http://ritay3.sg-host.com/product/lme-bb2.html


    The backend address and account password have been sent to the email by FPT on one machine

  • PhilPhil

    We are checking that. As soon as I will know anything, I will let you know.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.