Part 4: The Details

Yewwww, you folks have been amazing for coming this far in your journey to Clone Any Online Store using just Divi and WooCommerce. Last week you conquered adding some conditional logic, and this week we are going to polish the last few details from tweaking some design elements, to customizing WooCommerce emails, to accepting payments, and so much more!

NOTE: Yes yes, we know this is late, but we had a little snafu with our server and the entire post got deleted. Sad Panda.

Here we are! The last chapter in our journey to Clone Any Online Store with just Divi and WooCommerce. You’ve done amazing! In this installment we are going to start dealing with mostly some of the more business-orientated details like accepting payments, branding your emails, all things legal, adding packing slips to orders, and some minor design tweaks.

Ready? Let’s get into it!

Video Tutorial

Step 1: Fixing the Cart & Checkout Pages

Ok, so we kinda left things hanging with our Cart and Checkout pages which are not fullwidth and have a sidebar that doesn’t really make sense here. In this step, we are going to use the Divi Theme Builder to create templates for each of these pages which will automatically remove that sidebar and display the cart and checkout pages respectively using some stock WooCommerce shortcodes.

WooCommerce Cart Before
WooCommerce Checkout Before
Make sure you are logged in to an administrator account for the backend of your Divi install.

Cart Page

Head to Divi > Theme Builder
Add New Template > Cart > Create Template
Add Custom Body > Build Custom Body
Add a Single Column Row
Add a Code Module > Add WooCommerce Cart Shortcode > [woocommerce_cart]
Save the Template

Checkout Page

Head to Divi > Theme Builder
Add New Template > Checkout > Create Template
Add Custom Body > Build Custom Body
Add a Single Column Row
Add a Code Module > Add WooCommerce Checkout Shortcode > [woocommerce_checkout]
Save the Template
Save the Theme Builder settings

NOTE: You can read more about the WooCommerce Shortcodes and the ones available to you on their site in the Shortcode Documentation.

WooCommerce Cart After
WooCommerce Checkout After

Taking it Further

Now, if you wanted to take things a little further with cart and checkout pages that are truly bespoke, take a look at our BodyCommerce Checkout Page Presets. I’ll include a preview of 4 examples below.

BodyCommerce Shopify Checkout
Shopify Style
BodyCommerce Multi-step Checkout
Multi-step
BodyCommerce Payment Right Checkout
Payment Right
BodyCommerce One Page (Cart & Checkout)
One Page

Step 2: Customize WooCommerce Emails

In the wonderful world of eCommerce, there are few things as important as those email messages that confirm that a new order was placed as well as updates received in regards to those orders. It informs our store owners that a new order has come in and that the money bags are filling up, but it also gives the customer that shot of dopamine by knowing that fun treats are on their way!

Here is the issue, stock WooCommerce emails look pretty terrible, so we are going to show you how to give these a facelift so that they are more in line with your brand. Not just that, we will also give you a tool to use that will help ensure your emails are not being blocked by pesky (but helpful) spam filters.

Stock WooCommerce Email Template

WooCommerce Email Settings

Head to WooCommerce > Settings > Email Tab > Scroll Down

Email Sender Options

1) “From” name > Divi Engine & Fitch (This is the name that will show in the recipients inbox)
2) “From” address > [email protected] (This is the sender or reply-to email that will show in the recipients inbox)

Access WooCommerce Email Settings
WooCommerce Email Template Changes
Email Template

3) Enter the URL of the Header or Logo Image you’d like to be displayed at the top of your emails.
4) Enter any text that you would like to be displayed in the footer of your emails. This is a good spot for socials or policy page links.
5) Base color > #e04405 (Orange) (This will be used as the color for the header background and all headings in the email)
6) Body text color > #253746 (Dark Blue)

Save your work!

WooCommerce Email Template After

Ensuring Email Delivery

Now, what good is all this customization work if the emails are not getting delivered? Diddly squat I’d say. By default, WordPress uses the standard php-mailer function which had its place in the earlier days of the internet, but with the advent of advanced spamming techniques emails sent using this method are often caught in spam filters.

The best way to avoid this from happening is to utilize SMTP (Simple Mail Transfer Protocol) which is an authenticated method of sending emails from your WooCommerce store, this it will not get itself caught up in those spam filters.

We recommend you use a plugin such as WP Mail SMTP by WPForms to handle that for you. You can even use this with various transactional email services which even further secures your email delivery.

WP Mail SMTP

Taking it Further

BodyCommerce has some powerful email templating capabilities allowing you to even further customize the layout and appearance of your WooCommerce emails. Customize the look of your product tables, add products thumbnails, and even inject text before and after the product table.

BodyCommerce Email Templating

Step 3: Add Packing Slips to Orders

So, depending on the type of business you are running online, it might make sense to add packing slips to your orders so that customers can see detail on what has just arrived in that dopamine-filled box. You know, in case of amnesia or something. But in all seriousness, it is just a nice touch when shipping physical products that serve as a reference for the recipient. You could even include invoices if that is required.

To add these packing slips, we will use a plugin called WooCommerce PDF Invoices & Packing Slips.

WooCommerce PDF Invoices & Packing Slips

Install WooCommerce PDF Invoices & Packing Slips

Head to Plugins > Add New
Search WooCommerce PDF Invoices > Install > Activate

Install PDF Packing Slips

Configure the PDF Template

Head to WooCommerce > PDF Invoices
Configure the Template with your information
Save your work!

Configure PDF Template

Step 4: Policy Pages

Not to be overlooked, policy pages are something that can get you in some pretty spicy water if you are not careful. If you don’t have a policy plan, make one. And depending on where you are based out of, not having certain policy pages in place could incur some serious fines.

Policy Pages to Consider

Terms and Conditions

This might also be known as Terms of Use, Terms and Conditions, or Disclaimers. It essentially describes the rules users agree to when they visit your website or online store. While there is no legal requirement to have this, it is a good idea as situations might come up where a customers attempts to litigate you. CYA folks!

Privacy Policy

Unlike the Terms and Conditions, the Privacy Policy details how your site will be using the customer data, and what measures it takes to safeguard customer information. There is no way around this one as it is required by law. Especially with the introduction of GDPR, it is essential that you properly detail how you use data, and give your users the ability to delete their data at their request, even if your business does not operate in the EU.

Return and Exchange Policy

As the name suggests, you will want this policy to answer questions like whether you even offer returns and exchanges, how long they have, how long it takes, or any other rules you want around this. It is always a good idea to have a detailed Return and Exchange Policy because aside from protecting your business, it makes for having happier customers that are informed of their options.

Shipping Policy

This answers all the questions around how and when you ship client purchases. This policy should include the shipping company options, the shipping speed options, pricing, handling times, and shipping restrictions. The more detailed your shipping policy, the more in-the-know your customers are. The more client knows, the happier they are inclined to be.

Implementing Policy Pages

By default, WooCommerce will add Privacy Policy and Terms and Conditions draft pages. Inside you’ll find a generic version of both these policies, but don’t just chuck your business information in there and think you are ok. These policies require careful consideration and it is probably best to consult an attorney or use a service that specializes in creating more bespoke versions of these policies.

That said, we recommend looking into a service like Termly (no affiliation) that specializes in creating attorney-crafted documents for businesses. The benefit here is that the policies are maintained on their site and all you would need to do is embed them on yours. They offer both free and paid plans ($15 per month when this was posted), but remember that thing your parents always told you, you get what you pay for.ย 

Termly Compliance Documents

If you absolutely insist on cheaping out, yes you, check out a free plugin called WP Autoterms, but you didn’t hear that from us…

Step 5: Payment Processing

Here we are, at what I would consider being the most important part right after starting your eCommerce journey, getting paid!

Now when it comes to payment processors things can get a little murky, sometimes even confusing, but don’t fret, we’ve got some info that should put your mind at ease. Your options will probably be limited to based on where your business is located, but luckily easy to implement solutions with little friction have become vastly more popular. Gone are the days of resorting to clunky Paypal gateway. This space has come a long way.

While we are not going to run you through implementation due to this being a rather personal decision only you can make, we will offer a few options we can confidently recommend.

Things that Might Influence your Choice

Geography

Where you are based will influence what options you have available due to the limitations of the payment processor.

Payment Methods

Not all payment processors are created equal and thus not all accept the payment methods you might want to have available. Some offer Maestro cards, some do not. Some offer Cryptocurrency payments, some do not. This will be a personal choice based on your needs.

Convenience

Do you want a one-stop-shop? Are you more business orientated than technically inclined? These will all play into what you consider to be convenient.

NOTE:ย Notice how I did not add pricing into the mix here. The honest truth is that this space has become so competitive that they all settle on some measure of equality when it comes to pricing. The only spot where you might find more competitive pricing is with your bank where they have some wiggle room for negotiation. Just note that pricing usually depends on volume. The more transactions and dollars you process, the lower your pricing, and the higher your bargaining power.

Recommendations

*In no particular order

WooCommerce Payments - Convenience

This will probably be your most convenient option as it is entirely administered from the WordPress Dashboard you know and love. Sign up and access all of your payment information right from the WordPress Dashboard. Our only concern here might be that client and transaction information might be stored in the WordPress database which could expose you both to risk and database bloat. It is also currently limited to only 15 markets, so it might not be available in your region.

IMPLEMENT WOOCOMMERCE PAYMENTS

WooCommerce Payments

NOTE: Fun fact, WooCommerce Payments are powered by Stripe, so the fees are pretty much the exact same. The only difference is that with this option, you do not have access to the Stripe Dashboard.

Stripe - Payment Methods

If you are into some deep reporting as well as a pretty broad range of payment options, Stripe will have you covered. You can pay with traditional Credit Cards, Debit Cards, Apple Pay, Gpay, and more. You can even set up subscription billing. One thing to note is that it is slightly more complex to set up, but nothing your little niece or nephew can’t help you with. Stripe is also available in over 30 markets, so that is a solid win also.

IMPLEMENT STRIPE PAYMENTS

WooCommerce Stripe Payments

Paypal - Geography

And the Geography king is…yes. This one. Paypal has over 200 regions that they support and makes it a defacto option for those that find themselves outside of the reach of Stripe and WooCommerce Payments. Their fees are not too crazy and they also offer an host of payment options which include Cryptocurrencies.

IMPLEMENT PAYPAL PAYMENTS

WooCommerce Paypal Payments

Hey look, a (near) perfect clone!

Conclusion

Brush those shoulders off folks, weeks of hard work and dedication have brought you here. You now have officially learnedย How to Clone Any Online Storeย using only Divi and WooCommerce. What an achievement! Thank you for sticking with us through this journey.

But! And there is always a but. Let us know how you would like us to expand on this “course” or how we could improve it. We have really enjoyed putting it together for you, but we want to make sure you are getting the most out of it.

That said.

Definitely head to our Youtube Channel and subscribe to make sure you don’t miss any future courses or tutorials because this is going to be valuable for you and your design agency!

Catch you folks next week!