The code in this download folder displays a list of variations on the single product page which when clicked, dynamically changes the main variable product data on the single product page for each variation. The variations are displayed in columns like shop loop products using any single product page hook.
The code :
- adds a custom loop of variations on the single variable product page
- automatically selects the corresponding variation when clicked
- dynamically changes the product title to match the selected variation when clicked
- dynamically changes the price for the selected variation
- changes the product title on variation selection
Video Demo
Shows a loop of variations created for each variable product which uses the Single Variations template.
Also shows the variations selection for the size attribute and product entry title change dynamically when any variation is clicked.
Code Installation
There’s 4 steps :
- Upload the file named single-variations.php and var.js to your child theme folder or templates folder.
- Copy and paste the PHP code from the functions.php file to the end of your child themes functions file.
- On your variable product edit page, select the template named Single Variations from the Post Attributes box, as seen in the demo video.
- Copy and paste the CSS to the end of your child themes style.css file and clear caching.
Was This Tutorial Helpful?