It is very common that when we are creating our website we seek to heavily customize all the pages of our website, this is very normal as we always want to add a custom design and personalize our website according to our brand identity.
Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
This will always give us additional challenges since many of these customizations usually come with changes at the code level even when it is only something visual like adding custom CSS, this always forces us to have knowledge about how all CSS styles work and what kind of rule we need to add to get the result we want.
These types of challenges are a little more extended when we are creating a store and we want to customize some specific pages such as the store page or the view of simple products, we have to know that these types of pages cannot be easily customized, since its gets the styles directly from the theme we use and the structure is already defined by WooCommerce, in this case if we want to customize this type of page we need to have advanced knowledge of or use some alternatives that allow us to modify these pages visually.
In this sense, as I mentioned, we have alternatives to modify these pages visually, for this we can use Elementor or Divi, which we will be seeing in this article and which will allow us to customize the WooCommerce pages in Divi as we wish.
What is Divi and what does it allow us to do?
Surely if you are reading this article it is because you are already using Divi or you know how the theme works, this is one of the most used currently to design websites, since with its different modules it allows us to add customizations and the design that we want without the need to add code on our website.
This theme is developed by the Elegant Themes team, it is based on content blocks, whether they are sections, rows and modules that we can add and move with a click, with it we can start from scratch without advanced programming knowledge, so we can always are developing new improvements and updates that allow us to improve the design of our website developed with WordPress, one of these customizations is the possibility to work and customize the store pages, products, cart and payment form with the theme generator and the different modules that they have available.
Divi Theme Generator
This is an added functionality with the Divi theme which allows us to build custom templates for different parts of our website using the builder and all the modules that we already have available with the theme.
Some of the pages to which we can create custom templates with Divi and assign them to be displayed by default are:
- Blog page.
- Store Pages
- product page
- Search results page
- cart page
- Checkout page.
As you can see this is a potential and a great advantage when using Divi as a theme since it will allow us to add a design to my website from practically any part of the site that we are now developing.
You can see a little more about Divi and the options that we have available in our plans
How do we start creating our custom store template with Divi?
Configuring our new store template in Divi
After we know a little about what Divi is and all the possibilities we have with the theme, we can start creating our custom store template with Divi, the main objective is for you to know how the Divi Theme Generator works so that you can add later your custom WooCommerce page with Divi as you wish, or some other page we mentioned above on your website.
In this same order of ideas, the first thing we have to do is access the administrator of our website and go to the Divi Theme Generator.
Once we are in this section, click on the option that indicates to add a new template, within the configuration options we select the option that indicates WooCommerce Shop Pagewith this we can assign this new template as our new store page.
Keep in mind to save the changes to continue with the customization of our template.
Once we have the first configurations created, we select it Add custom body Build custom bodythis will start the Divi builder loading where we can start creating our new store page.
If you want to add a custom store page from the Divi library, you just have to select Choose design, you can see more about Divi and all the available options in the following article that we have published: a perfect and easy template.
After this, what we have to do is start building our new store page that will replace the current WooCommerce view.
Customizing our store page with Divi
The first thing we have to do once we have configured the template of our theme is to add the main section that will contain the main title of the page. This serves to indicate to the user which page they are on at the moment, so you must do the following :
- Add a new row of a column
- Add the title of your store (you can customize it as you wish)
The new row you add should have the following measurement and layout settings:
- Padding 110px
- Base 100px
- Background color: #f6f6f6
- Text size: 40px
You can select the font and color you want to suit the identity of your website.
After creating our main store header we can proceed to add the store module that will allow us to display all the products that we now have added to our website, for this we need to add a new Divi section with a column where we will have all the products what we want to show.
You can select the font and color you want to suit your website identity, as well as the borders, stars, and other elements you want to display on your page.
With this we go to our store page and update we will see that the custom template we are creating for our WooCommerce store page is already being applied.
If you don’t see the changes on your shop page make sure to save the main changes in the Divi Theme Builder.
Adding additional options to customize our store page in Divi
We already have our store page configured in Divi, but we can add many more options to our page and customize it even more, this allows us to promote any product that we have on offer, or simply add a page where the user can register their data and obtain special offers that we may use to promote our website.
To add a promotion banner, what we have to do is add a new section in Divi that has the following settings:
- Padding 160px
- Base 160px
- Margins 0
- Background: Custom Image
- Custom Sub Title
- Title highlighting the offer
- call to action button
In the following video you can see the step by step to add this banner, you can pause them if necessary so that you can see the added design options.
In this way we can have a personalized store page and with the possibility of adding any additional element or design that we want to incorporate in our store.
Conclusions
As you can see, customizing some pages of our website can be a simple task if we know how it works, and you know all the possibilities that a theme or page builder that we use like Divi can offer us, this is a great advantage because we can add customizations to Archive pages easily without the need to touch any additional code or modify the default template provided by WooCommerce.
This makes it easier for us to add a much more personalized identity to our website based on our brand and the services or products we want to offer our customers.
If you want to know even more other options that we have available to customize our website or a store developed with WooCommerce you can take a look at the following articles.
Help us improve our content by sharing your opinion
WordPress and Woocommerce support team at .
Facebook Comments
Disqus