Apple Style Product Addons Page Template for WooCommerce

The code in this download folder creates a apple style product page using variations in WooCommerce. The code :

• Makes the product gallery sticky on scroll, on desktops only.
• Converts the variation options into clickable addon buttons.
• Adds the total price of all product addon’s to a sticky footer menu.
• Dynamically updates the total price based on which addon’s are selected or deselected.
• Includes PHP code in the functions file for an optional redirect to the cart button on add to cart click.

Demo Video

The demo video shows the default single product page displaying a custom template coded to work like a apple.com product page with addon’s.

Tested using the Twenty Twenty default theme for WordPress however should work in any WordPress theme with minor CSS modifications.

Installation

There’s 4 steps :

1. Upload the apple.php and apple.js files to your child theme folder.
2. Copy and paste the PHP code from the functions.php file ( excluding the opening PHP tag ) to the end of your child theme functions file.
3. Copy and paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
4. Select the Apple Product Page template from the Post Attributes field on the edit product screen as seen in the demo video.

You can then create your variable product Attributes and Variations.

Download Folder

Closely Related Solutions

• Variation Addons Block With Price Difference for WooCommerce
• How To Group Variations & Allow Only 1 Selection Per Product
• Variations As Buttons in WooCommerce