BLOG CATEGORY
Pankaj Shah web agency director in London with over 20 years of experience in web design and project management

I hope you enjoy reading our blog posts.

If you want DCP to build you an awesome website, click here.

WooCommerce Flatsome back image fade video tutorial

BACK

In this video tutorial, I will show you how to back image fade in your WooCommerce shop category pages.

WooCommerce Flatsome back image fade video tutorial

WooCommerce Flatsome back image fade video tutorial

Below, you can view a step-by-step video tutorial guide on how to set up back image fade for product listing in your WooCommerce shop.

Note: In this tutorial, I will be using the latest Flatsome WooCommerce Theme.

Tip: View this article for adding basic products to WooCommerce.

Tip: View this article for adding product variations to WooCommerce.

Video Tutorial Content

  1. Tutorial introduction for setting up back image fade for product listing in WooCommerce.
  2. Log in to the WooCommerce admin control panel and select “Appearance” from the left side menu.
  3. Select “WooCommece” from the left side menu in the main appearance options.
  4. Select the “Product Catalog” option.
  5. Scroll down the options panel to “Product Box” options.
  6. Select the desired effect from the “Product Image Hover Style” drop-down menu.
  7. Try Option 1: Back Image – Fade In
  8. Try Option 2: Back Image – Zoom In 
  9. Select the “Publish” button to confirm the back image fade style.

Flatsome back image fade WooCommerce video tutorial

How to add image back fade to WooCommerce shop product listings

WooCommerce 2022 Tutorial

WooCommerce Frequency Asked Questions

What is a product back image fade in a WooCommerce store?

Back image fade on product listings allows a user to hover over a picture and automatically see a different view of the product. At DCP we often use this feature when building a website that contains clothing items. The back image fade can be used on any type of product listing which has more than a single image. 

How many product images are needed for back image fade in WooCommerce?

To use the back image fade in WooComemrce you need to have a minimum of two images.

What styles are there for back image fading on the product listings?

Flatsome supports two different back image fade styles:

  • Try Option 1: Back Image – Fade In
  • Try Option 2: Back Image – Zoom In 

Where can back image fade be used in WooCommerce?

In WooCommerce using the Flatsome theme, the default category view will show the back image fade. If you add custom product listings on your home page then you need to make sure the rollover effect for the product module is set to default.

What is the best WooCommere Theme for 2022?

At DCP Web Designers we use the Flatsome Theme as this theme is highly customisable. The theme you select will determine the amount of control you have over your website. Faltsome is great for building customised eCommerce website solutions.

See how my company can build an amazing website for your business
  • Custom web design
  • Secure and fast website solution
  • Full management training
  • Take control of your website
  • SEO optimisation
  • Reliable web hosting and emails
BOOK A CALL

Article created by: Pankaj Shah | DCP WooCommerce Web Designers

Author

Picture of Pankaj Shah

Pankaj Shah

Pankaj Shah is the founder of DCP Web Designers, an award-winning London-based web design and digital marketing agency. With over 20 years of experience, he specialises in WordPress web design, WooCommerce, SEO and helping businesses build effective online solutions.
Tell Us Your Thoughts
Do you want an
amazing website?

Hi, I ‘m Pankaj Shah. My goal is to help your business grow by creating amazing websites!

Contact me for a free quote.

Ge an amazing website for your business
Guest Post Blog
Free Web Tools

This website (dcpweb.co.uk) uses cookies to improve your browsing experience and help us understand how our site is used. By continuing to browse this website, you agree to our use of cookies.

To learn more about how we collect, use, and protect your data, please read our Privacy Policy.

ACCEPT COOKIES

Since 2004, we have designed and developed websites for companies across a wide range of industries, from local service businesses to ecommerce brands and professional organisations.

Our focus is on creating websites that not only look professional, but also perform well in search engines, attract the right audience and support long-term business growth.

If you are looking for experienced web designers who understand how to build websites that deliver real results, our team is here to help.

Privacy Policy

Last Updated: 01/07/2024

Different Colour Productions Ltd (“we,” “us,” or “our”) is committed to protecting your privacy. This Privacy Policy outlines our practices concerning the collection, use, and disclosure of personal information when you visit our website or engage with our services. By using our website and services, you consent to the terms outlined in this Privacy Policy.

1. Information We Collect

We collect various types of information to provide and improve our services. The types of information we may collect include:

1.1. Personal Information: This may include your name, email address, phone number, and any other information you provide when you contact us, request information, or subscribe to our newsletter.

1.2. Log Data: When you visit our website, we automatically collect information, such as your IP address, browser type, pages visited, and the time and date of your visit.

1.3. Cookies and Similar Technologies: We use cookies and other tracking technologies to improve your experience on our website. You can adjust your browser settings to reject cookies or be alerted when cookies are being used.

2. How We Use Your Information

We use the collected information for various purposes, including:

2.1. Providing Services: To provide web design and related services you have requested from us.

2.2. Communication: To respond to your inquiries, send updates, and provide customer support.

2.3. Analytics: To analyse and improve our website and services, as well as monitor usage patterns.

3. Information Sharing and Disclosure

We do not sell or rent your personal information to third parties. However, we may share your information with third parties under the following circumstances:

3.1. Service Providers: We may share your information with trusted service providers who help us deliver our services, such as hosting providers, analytics providers, and marketing services.

3.2. Legal Obligations: We may disclose your information when required by law, to comply with legal processes, or to protect our rights, privacy, safety, or property.

4. Your Choices

You have choices regarding your personal information:

4.1. Access and Update: You can access and update your personal information by contacting us.

4.2. Marketing Communications: You can opt out of receiving marketing communications from us by following the unsubscribe instructions in our emails or emailing [email protected]

5. Security

We take appropriate measures to protect your personal information from unauthorised access, disclosure, alteration, or destruction.

6. Links to Other Websites

Our website may contain links to third-party websites. We are not responsible for the privacy practices of these websites. We recommend reviewing their respective privacy policies.

7. Changes to this Privacy Policy

We may update this Privacy Policy from time to time to reflect changes in our practices. Any changes will be posted on this page, and the date at the top will indicate the latest update.

8. Contact Us

If you have any questions or concerns about this Privacy Policy or our practices, please contact us at: [email protected]

By using our website and services, you acknowledge that you have read and agree to this Privacy Policy. Different Colour Productions Ltd is committed to safeguarding your personal information and respecting your privacy rights.

ThreeBestRated Top 3 Website Designers in London 2026 award for DCP Web Designers Certificate