WooCommerce dispensary child theme customization tutorial and code snippets for H32B2017 Dispensary Theme for WordPress.
In this tutorial, we will be using the H32B2017 child theme, included with our WooCommerce-enabled WordPress dispensary theme, to create a custom promo banner which uses the Parallax effect.
Prerequisites
Before customizing your child theme in this tutorial, please ensure you have the following:
WordPress 4.0+ must be installed
H32B2017 Dispensary Theme for WordPress
H32B2017 Child Theme (included)
Adding Parallax jQuery Plugin
For our example, we’re using Parallax.js by PixelCog. For more information about this jQuery plugin please visit the GitHub page.
First, you’ll need to download the parallax.min.js file, create the asset directories (if they don’t already exist), and upload it to your child theme’s assets/js directory:
~/wp-content/themes/h32b2017-child/assets/js/
Once uploaded to your child theme’s assets/js directory, we’ll need to enqueue the script in your child theme’s functions.php file by updating the h32b2017_child_scripts() function.
Adding Parallax Background Image
For our parallax background image, we want an image that’s tall enough to completely cover our parallax area as the page scrolls. In this example, we’re using a JPEG image with the dimensions of 1500×1100 (336KB).
You will also need to create an assets/img directory (if one doesn’t already exist) in your child theme directory and upload your image to your child theme’s assets/img directory:
~/wp-content/themes/h32b2017-child/assets/img/
Once your selected parallax background image has been uploaded to the child theme’s assets/img directory we can proceed to override the pluggable promo function.
Overriding the Promo Template Tag
In this example, we’re customizing our bottom promo which uses the pluggable h32b2017_bottom_promo_content() function. Add the function h32b2017_bottom_promo_content() in your child theme’s functions.php.
Adding Parallax CSS
Now we need to add the parallax CSS to our child theme’s styles.css file. Alternatively, you could add this CSS snippet in the “Additional CSS” section of WP Customizer: Dashboard > Appearance > Customize.
In our example, we’re also adding a slightly opaque background color to serve as an overlay for the text displayed over the parallax image.
Adding HTML to Bottom Promo Theme Option
From the administrative dashboard, access the “Promotions” section of WP Customizer: Dashboard > Appearance > Customize.
In our example, we’re using the theme_mod “promotion_bottom” to populate the content of our custom parallax promo banner. Please note, if you’re using additional HTML tags, you may need to update your child theme’s styles.css to provide respective CSS.
Support & Feature Requests
Your feedback is always appreciated! It helps us continue to improve our WooCommerce-enabled WordPress theme for medical marijuana dispensaries and incorporate additional features specific to the medical cannabis industry.
Experiencing an issue with your dispensary WordPress theme? Please submit a support ticket to expedite a remote troubleshooting appointment. If you’d like to see a new feature implemented in the theme, please contact us, select the “Feature Request” as the subject and let us know what’s on your mind!
