Add text before shopping cart icon using jQuery in Divi

Add Text Before Shopping Cart Icon

Would you like to add an extra piece of text before the shopping cart icon in your woo-commerce divi site. For example you might want to add the words “Shopping Cart” or “All Cart Items” before the cart icon. This will make it very obvious for the user, where the shopping cart is.

To achieve this I added some jquery to the Divi theme. To add jQuery to the Divi theme you can scroll to – Divi -> Theme Options – Integration Tab -> Add code to the < head > of your blog.

Paste the following jQuery and Save Changes. You can change the words “Shopping Cart” to anything you want it to be. You can also adjust the margin or add some of your own styles (color, font etc) in the style attribute.

<script type=”text/javascript”>
jQuery(function($){
$(‘#et-secondary-menu’).prepend(‘<span style=”margin:0 7px”>Shopping Cart</span>’);
});
</script>

I hope you like this piece of code and hope it works for your divi customization.

Hamburger Menu Color in Divi

Mobile Menu Color in DIVI

Do you want to change the color of the mobile menu for your DIVI website. ?

/* Change color of the hamburger menu on tablet and mobile. Add the following to your style.css. Adjust the color. The  following will make it black color*/
span.mobile_menu_bar:before {
color: #000000!important;
}

hamburger menu color

Hamburger Menu Color

Simple border around a row in Divi

Lets add a border to a row in Divi. For this example I have added custom css to the row module. This will style the row container that holds its columns and modules. I’ve added a simple border and some custom padding to add a nice box around the contents of the row. This tip was a CSS tip by Elegant Themes that I had read.

Row Settings -> Custom CSS –> Main Element
border: 3px solid #74c403;
padding: 20px;

This tip was featured on Elegant Themes blog.
Elegant Themes Tips