Add Dot Pagination to WooCommerce Product Gallery Image Slider

Woocommerce Dot Navigation

You can add dot pagination to WooCommerce Product Gallery images by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider which it has a few more configurable options. By default the product gallery navigation uses thumbnails but this can be swapped to dots by changing the ‘controlNav’ value. In functions.php add…

Read More

Add Navigation Arrows in WooCommerce Product Gallery Slider

Woocomerce Navigation Arrows

You can add Navigation Arrows in WooCommerce Product Gallery by adding a filter and then some CSS. WooCommerce uses a slider called Flexslider and it has a few more configurable options. In functions.php add add_filter( ‘woocommerce_single_product_carousel_options’, ‘sf_update_woo_flexslider_options’ ); /** * Filer WooCommerce Flexslider options – Add Navigation Arrows */ function sf_update_woo_flexslider_options( $options ) { $options[‘directionNav’]…

Read More

Adding Multiple Fading Images To A Background with jQuery

You can add multiple sliding/fading images to a background HTML element using the Backstretch jQuery plugin, this is great if you just want to alternate a number of images behind another web page element similar to a slider but without the overhead of using a slider plugin. Image Preparation Generally you’ll want to optimize your…

Read More

Add Multiple Site Background Images To Genesis Agency Pro Theme

You can add a multiple images as alternating site background images in the Genesis Agency Pro theme by tweaking the backstretch jQuery plugin that comes with the theme. Out of the box Agency Pro uses one master site background image as set in the Customizer, preferably at 1600 x 1000px. Prepare your images Get your images ready at 1600 x 1000px and…

Read More

Create a Loop of Featured Images in a Slider from Posts in Genesis

slick-slider-featured-images-genesis

You can create a slider of Featured Images from the posts in Genesis by creating a custom loop and using Slick Slider. Setting Up Slick Slider First download and set up the Slick files needed, you’ll need to file these in your theme’s js and css directories: slick.min.js ~> js slick-theme.css ~>css ajax-loader.gif ~>css fonts/ ~>css…

Read More

Add a Slider to the Home Page in Genesis Theme WordPress using Cyclone Slider

Sliders have been slammed a lot recently, notably for their effectiveness and usability, however within certain contexts they are still relevant and more importantly still popular with clients, their use may be more relevant to certain industries, their usage may be better suited to subtle areas of the page. That said, here is a guide…

Read More