Every website needs to portray trust when trying to get potential customers to checkout.
This is especially important for your first orders.
All trust symbols, thats certification logos or other elements that can be used to help your checkout page should be considered.
How do you add these items? Well in this tweak we will show you how.
You can get the snippet below that we use in the video and remember to use a child theme.
Overall this is a great effect and something you should absolutely have in your list of snippets and solutions.
How to video – stop cart fragments loading on your home page
We have been talking about page speed a fair bit lately. I have actually become pretty obsessive about it.
This lead me to make a fair few simple script adjustments to improve my homepage load time.
I setup a GTMetrix monitor on the homepage of Divi Framework and found the cart fragments load was slowing down my page at random times.
Overall I thought removing it on the homepage would make sense, so I experimented and found it was an excellent choice to turn it off.
How do you turn of the Cart Fragments? Lets me show you how.
First – Open your functions.php in your child theme.
Second – Past in our code snippet to your functions.php file
Third – save it an enjoy the time savings.
You can extend this to other pages if you want to. For now I only do it on my homepage.
How we built the Divi Framework Website
I recently thought it would be a great idea to share with people how we built the Divi Framework Website. We really like what we have built and intend to keep it growing and advancing as a premium location to purchase plugins for your Divi powered websites.
The Original Idea of Divi Framework
Our Team has been building WordPress and PHP based websites for over 10 years under the name M R K Development Pty Ltd, which is now M R K Websites.
The team has made all sorts of addons and tools for Divi that made development more simple, so we decided we should make a site to sell them and see if other people were interested.
When we saw just how popular Divi Builder was becoming, we decided it would be valuable to the WordPress community, and to Divi Theme users, to create plugins and training to help you get more out of your WordPress websites using Divi from Elegant Themes.
The idea for using all of these tools – that we use every day – as a framework was born and we registered the domain name diviframework.com and got started planning our website.
Want to learn about the difference between a framework and libraries? Read more information here.
The Challenge of an Ecommerce Site
The team began planning the Divi Framework website and found when building this Ecommerce site we would have a unique challenge. We had to ensure that the site is trustworthy, has great UX and has the technical features to deliver the products that we are going to be selling.
In the case of Divi Framework we wanted to sell software and needed API Activations for our plugins. We also wanted e-learning wrapped into the site that has blogging, knowledge base articles and membership tools all in one.
WooCommerce was the solution for this complex build because it was able to be flexible enough to give all these features in a relatively short amount of time because of the community around it.
We picked out plugins to help us with our core features and got moving with the development of the website.
The Core Features
Our core features right now on Divi Framework are:
WooCommerce Memberships – we use this to manage the membership aspect of the site.
WooCommerce Subscriptions – We use this to integrate with the subscription settings of each product.
WooCommerce API Manager – this is integrated with all our products to allow API Key registration and activation.
WooCommerce Zapier – this is used to help track all our orders and inject key information into tracking spreadsheets and our CRM.
WooCommerce Mailchimp Integration – we use this to track what people are purchasing, the dollar value they have purchased and make sure that we are able to communicate to customers in a personalised way.
WooCommerce Google Analytics – We use this tool to better track orders and analytics on the site.
WooCommerce Auto Complete – This open source tool auto completes orders as we have a electronic payment system and virtual delivery of product.
WooCommerce PDF Invoices – We use this to generate a PDF invoice for each customer. This was part of our due diligence in putting together a great website with best practices in Australia – our country of operation.
WooCommerce Stripe – The final part of the puzzle, we use Stripe to take payments.
These are just the WooCommerce areas of the site. It works really well for us as it allows all those connected parts to provide to the specific needs of our store.
Other Plugins and Features
We use Divi from Elegant Themes as our main theme and page builder. This made it really easy to get a long way fast with our website however we also had a few other challenges to deal with around the theme.
So – we created a child theme to deal with these challenges. This now allows us to customise product tabs and the product pages to the unique requirements of our products.
Software requires very specific theme requirements because of the nature of your product. The software product page integrates with our FAQ tool, Knowledge base and Changelog plugin which were all developed as custom addons.
This means that when we update our Change Log, FAQ Database or Knowledge Base our product page is instantly made up to date with the changes from these areas.
This makes for great efficiency on our site and means we don’t have to repeat ourselves.
We integrated these items directly into the product page at this point to make sure it all works as it should.
SEO and Marketing
SEO is of huge importance for anyone creating an Ecommerce website. Getting found by customers that are looking for you is so important.
To help the Divi Framework get great rankings we use Yoast Premium Plugins.
This has helped us get Divi Framework ranking well in a short amount of time which is very important to ensure we can grow this business.
We use the Yoast Premium Plugin, Yoast WooCommerce Plugin and the Yoast Video Plugin together to make some great XML sitemaps and make our pages rank well.
We then took our search engine console data and google analytics data and brought the whole picture together using data studio.
Data Studio from Google allows us to keep track of our rankings and check we are going in the right direction.
We can also pull this data to make sure that we are tracking on our youtube channel as product video and tutorials are essential to the usage of our products which are very technical.
Hosting and Page Speed
Using Google Cloud Hosting with Kinsta has meant we can use HTTP/2 and ensure we have a fast loading website which is increasingly important especially when it comes to online selling.
Kinsta have been a great partner in helping use deliver a really fast page speed.
We will be rolling out a full e-learning package using LearnDash and making more of a community page for people using WooCommerce and Divi.
We also plan to release other great plugins and contribute to open source.
Fixing WooCommerce Buttons in Divi
WooCommerce button style issues with Divi Theme
Don’t lose sales because of not so great WooCommerce button styles on your Divi Theme. The default WooCommerce button styles on Divi Theme is average. You can end up with simple issues, like contrasting colour, when you style your button.
The WooCommerce Add To Cart button is the first thing your customer will see on a product page. Being presentable when making a sale is a must. So why be any different when it comes to your WooCommerce button styles?
Styling the button background and font is the least you should do. And it’s not that difficult.
The Fix for WooCommerce Button Styles Issue
We have created a CSS snippet for this fix. Click here to view it on GitHub.
Add the above snippet to your child theme’s stylesheet file.
Also, don’t forget to watch the video above.
Alternatively, you can use our FREE plugin
Introducing WooCommerce Colours For Divi
The WooCommerce Colours For Divi, a FREE plugin from diviframework.com, helps you fix the button styles. You can set button font size, font colour, background, border radius and more.
You can also set styles for alert messages and on sale badge.
By using this plugin, you get more styling options for buttons and additonal styles for alert messages and sales badge. With automatic plugin updates, you will automatically receive new functionality and fixes.