TshirtEcommerce Swatch Product
Shows Tshirtecommerce color swatches for each product on WooCommerce product lists with ability to pass color hex to designer tool
by phinq1910 · github.com/thuyydt/tshirtecommerce-swatch-product · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/thuyydt/tshirtecommerce-swatch-product/archive/refs/heads/main.zipTshirtEcommerce 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