Install
This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.
Install straight from GitHub with WP-CLI:
wp plugin install https://github.com/thuyydt/tshirtecommerce-swatch-product/archive/refs/heads/main.zipNo built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
TshirtEcommerce Swatch Product is a WordPress plugin that enhances your WooCommerce store by displaying color swatches from the TshirtEcommerce designer directly on product list pages (Shop, Category, etc.). It allows customers to preview product colors and pass the selected color hex code directly to the designer tool.
Features
- Color Swatches on Product Lists: Automatically displays color swatches for products configured with TshirtEcommerce.
- Designer Integration: Passes the selected color hex code to the TshirtEcommerce designer tool when a customer clicks on a product.
- Dynamic Image Switching: (Optional) Switch the product image when a swatch is hovered or clicked.
- Flexible Placement: Configure the hook position and priority to place the swatches exactly where you want them in your theme.
- Elementor Compatibility: Fully compatible with Elementor page builder.
- Responsive Design: Set different maximum visible colors for Desktop and Mobile devices.
- Customization:
- Adjustable swatch sizes.
- Option to show/hide color tooltips.
- CSS order control.
- Show/Hide on Shop or Category pages.
Requirements
- WordPress
- WooCommerce (3.3 or higher)
- TshirtEcommerce
- PHP 7.4 or higher
Installation
- Download the plugin zip file.
- Go to your WordPress Admin Dashboard.
- Navigate to Plugins > Add New.
- Click Upload Plugin and select the downloaded zip file.
- Click Install Now and then Activate.
Configuration
After activation, you can configure the plugin settings:
- Navigate to Settings > Tshirt Swatches.
- Display Settings:
- Show on Shop Page: Enable/Disable swatches on the main shop page.
- Show on Category Pages: Enable/Disable swatches on product category archives.
- Swatch Size: Select the size of the color circles.
- Show Color Tooltips: Enable to show the color name on hover.
- Maximum Visible Colors: Set how many colors to show before a "+X more" counter appears (separate settings for Desktop and Mobile).
- Hook Position: Choose the WooCommerce hook to output the swatches (e.g.,
woocommerce_after_shop_loop_item,woocommerce_shop_loop_item_title). - Hook Priority: Adjust the priority to fine-tune the position relative to other elements.
Usage
Once installed and configured, the plugin will automatically detect products that have colors set up in TshirtEcommerce and display the corresponding swatches on the product listing pages.
Changelog
1.5.7
- Full Elementor compatibility.
- Added CSS order control.
- Added dynamic image switching feature.
- Extended swatch sizes.
- Added device-specific maximum visible colors (separate settings for desktop and mobile).
License
GPL2