WooCommerce Product Slider

  1. Home
  2. Docs
  3. WooCommerce Product Slider
  4. How To Override Templates

How To Override Templates

WooCommerce Product Slider supports template overrides from a theme. That means you can customize the appearance of the plugin-specific designs. The overridable files are located in the templates folder. For your convenience, we have created a hierarchy-

woo-product-slider/
│ ├── language
│ ├── src
│ │ ├── Admin
│ │ ├── Frontend
│ │ │ ├── assets
│ │ │ ├── views
│ │ │ │ ├── partials
│ │ │ │ ├── templates
│ │ │ │ │ ├── loop/
│ │ │ │ │ │ ├── add_to_cart.php
│ │ │ │ │ │ ├── price.php
│ │ │ │ │ │ ├── rating.php
│ │ │ │ │ │ ├── thumbnail.php
│ │ │ │ │ │ ├── title.php
│ │ │ │ │ ├── carousel.php
│ │ │ │ │ ├── preloader.php
│ │ │ │ │ ├── slider-title.php
│ │ │ ├── Frontend.php
│ │ │ ├── Helper.php
│ │ ├── Includes
│ ├── vendor

So all the files mentioned above can be overridden by your theme directory.

Steps to override the template of WooCommerce Product Slider:

  1. Make a folder named woo-product-slider” in your active theme. (It is better to create the folder in your active child theme)
  2. Create another folder inside the woo-product-slider” and name it templates”.
  3. Copy the template you want to override from the plugin’s templates folder.
  4. Paste the template file in the woo-product-slider > templates folder inside your active theme.
  5. Now open the file in a text editor and edit it as you like.
  6. Now reload the page from the browser and see the changes you made.

Say, for example, I want to override the carousel.php file through my child theme.

Here Noteworthy: It’s highly recommended to override the file through the child theme instead of the main theme. Otherwise, the file customization will get reverted to the original once any theme update happens.

So to override the carousel.php file, you have to copy the file from

/wp-content/plugins/woo-product-slider/src/Frontend/views/templates/product-loop/

theme/carousel.php

and paste it into your child theme directory

/wp-content/themes/twentytwenty-child/woo-product-slider/templates/product-loop/

theme/carousel.php

Then modify the file content as you want.