Opulence Cart Modification

Hello again!

Just several minutes ago, i got a message from my friend Kimberly from Carolina. This question is unique for me since there are a lot of Lensa question, but never for Opulence theme.

If you check at Opulence demo from ColorLabs, you will see if the cart shortcut is located on the right-top of your screen (this theme is an e-commerce theme). What she asked is about how to move those cart shortcut into the main navigation bar.


The illustration is something like displayed on the picture above. This is what she want to have (or maybe you also). To do this modification you will need to modify 2 files: header.php and style.css.

Step #1

At this step you have to change the cart layer position to be inside of main navigation bar layer. Open the file and find out this code:

<?php get_template_part('content', 'cart'); ?>

Cut that code and paste it after this code:

<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'container_class' => '', 'menu_class' => 'menu', 'fallback_cb'=>'colabs_nav_fallback') );?>

Once you made it, your work at this file is finish.

Step #2

At this final step you have to modify a file named style.css. Put this code at the very end of the file:

li.shopping-bag {
float: right;
position: absolute;
top: 0px;
right: 0px;

li.shopping-bag:hover > .cart_list.product_list_widget {display:block;}

And done! Have fun with it!


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s