How to change WooCommerce Products per Page with Divi

For a recent project I needed to change the default number of products displaying in the WooCommerce shop page. Usually this is set in the ‘Settings > Reading > Blog pages show at most’ option. So I was confused when I changed the value there and there was no change in the shop page. I searched within the WooCommerce settings, the customizer, searched for plugins and I found nothing, except this code snippet from the WooCommerce official documentation, but I found it strange that such small feature wouldn’t exist and we would need to add custom code.

Turns out I forgot to search in the most obvious place: the settings page for Divi itself. Here’s where you can find the option to change the number of products per page on the shop:

Divi Theme Options > General > Number of Products displayed on WooCommerce archive pages

Hopefully this will be useful to someone who will need to do the same and doesn’t find the option straight away.

World Map on Divi

There are several reasons why you might want to have a world map on your Divi powered website. The builder already includes a great module that allows you to add a map generated by Google Maps to your page. However you might be looking to add something more simple, more stylized, that fits your design.

I have developed a plugin called Interactive World Maps that is 100% compatible with Divi and allows you to add a map to your page using a different technology, also from Google, that generates interactive vector maps. You can colour countries, link them to specific pages, add information that will display on tooltips or on lightboxes and even add markers to specific locations. Here’s an example of how a map can look like:

 

All Countries Placeholder
All Countries

 

Although the plugin doesn’t add a new module to the Divi Builder, it works with shortcodes, so you can add it in any module that accepts text. Here’s how to add the map to your Divi page:

1) Install the Plugin

You canĀ get the plugin for only $21 with 6 months support included and all future updates. Once you have the plugin zip file, you can install it like through the Plugins > Add New > Upload interface in your administration. Once you have the plugin installed you’ll see the new ‘Interactive Maps’ menu entry in your administration menu.

2) Build Your Map

On the plugin’s website, you’ll find some instructions and even a video on how to build your first map. Depending on what you want to achieve, you’ll need to do different things. But basically you should read the instructions on screen so you know what you need to do.

3) Add Shortcode to your Page

Once you save your map, you’ll have access to a shortcode with this format:

show-map id=’X’

You can place this bit of text in any module from the Divi Builder that accepts text. Most likely you’ll end up adding it on the Text Module. Simply copy the shortcode and add it inside the text module, in the text editor. Once you save your page and preview it, you should see your map.

When the responsive mode is enabled for the maps, they will be as big as the container where they are placed. If you place them inside a full width row, then the map should take the full width also, creating a full screen map.

Feel free to ask any questions below on the comments.

If you have already purchased the plugin and you need support, please contact me through the support page on Envato Market.

Get this plugin for only $21 one time fee.

6 months support included and all future updates

Date picker in Divi Contact Form

Divi is one of the most used themes on WordPress and one of the latest updates introduced a ton of new features for the Contact Form module. However a simple yet useful input type missing is a date picker. Might not be used by the masses, but it’s very useful for some cases. For a recent project I needed to build a contact form that would work as a booking request form, so a date picker field would be a valuable addition to the arrival and depart date fields. I have developed a plugin that allows you to do this and also has the extra option of enabling a time picker.

With this plugin enabled, what you need to do is give a unique Field ID to your field, when editing the field you want to convert to a date picker, in the Contact Form module. For my project I used ‘date-arrival’ and ‘date-departure’.

Then you’ll use those IDs to tell the plugin which fields to convert to date pickers. Go to Settings > Date Time Picker and add the following to the ‘Selectors’ field:

input[data-original_id='date-arrival'],input[data-original_id='date-departure']

Basically you’ll need to add input[data-original_id='your_field_id'] to the selectors field and repeat that if you have more fields. If you copy/paste the code from here, make sure to re-write the ‘quote’ signs, since they might get changed in the copy/paste.

When you save these changes you should have your contact form fields converted into date pickers.

Here are some screenshots of how I implemented the date and time picker in the field.

Not so hard, right? Hopefully Divi will include a date-picker or date-time-picker option for the contact form fields at some point, but until then these workarounds are easy enough to implement.