Have you ever tried any premium WordPress WooCommerce themes
Have you ever tried any premium WordPress WooCommerce themes? If “yes”, then did you like it? Many people think that all the pre-made premium WooCommerce themes are poorly designed. But this is not true. I’ve chosen some of them, and they are really cool!
The problem with the amazing themes is to make sure their design matches your style, business requirements and they need to be flexible. If you want a theme that is not easily customizable by yourself or a small business owner in a good theme, you can hire a developer with the required knowledge to develop your website.
However, if after reading this article you feel more confident about customizing premium WooCommerce themes on your own, then my work is done. So let’s begin!
Among top-rated WordPress themes for building elegant websites through an intuitive visual editor, the Divi theme review profile stands out for its broad integrations extending functionality, pre-made page templates, customizable Divi builder, and engaged community support forum.
1. Change WooCommerce Templates
In the appearance tab of twenty seventeen theme you will see a lot of files that need to be edited or created from scratch. You can achieve this using a text editor such as Notepad ++ . Just open the file and edit it as you wish.
Go to the appearance->editor and open header.php file. You will see this line of code around the 50th line : <?php do_action( ‘ wc_bar_header ‘ ); ?> Paste the following code before . It’s all about changing the footer area of your WooCommerce theme. <div id=”footer-wrap”> <?php if ( is_shop() ) : ?> <div class=”footer”> <?php do_action( ‘ wc_my_account_content ‘ ); ?> <?php footer_show_social( ‘<!–no–>’ ); ?> <a href=”#” class=”footer-btn”>Visit store</a> <?php if ( is_shop() ) : do_action( ‘ woocommerce_after_main_content ‘ ); endif; ?> </div><!– .footer –> <?php endif; ?> <?php if ( ! is_shop() ) : $featured = get_post_meta( $post -> ID , ‘ _featured ‘, true); if (!empty($featured)) { echo ‘<div class=”my-featured”><div class=”my-links”>’; echo ‘<a href=”#” title=”‘.__(‘See all featured items’,’theme2118′).'”>’.__(‘See all’,’theme2118′).'</a>’; echo ‘</div>’; echo $featured; echo ‘<span><i class=”fa fa-link”></i></span></div>’; } ?> <?php endif; ?> </div><!– #footer-wrap –>
Note:
This example shows you how to change the footer of your WooCommerce themes. You can always use this code for customization and ask the developer to customize your WooCommerce theme for you.
3. Theme Customization using Child Theme
As I told earlier, this method is for those who don’t want to edit the code of their WordPress theme directly. If you don’t know how to create a child theme in WordPress then you can ask a developer or follow our guide on creating a child theme in WordPress .
This method will help you to customize your child theme with no effect on the parent theme so you don’t have to worry about losing any of your changes.
In this example, I’m going to show you how to change WooCommerce product reviews so they look like the ones below:
<h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<span class=”rating-stars”><?php echo get_avatar( get_the_author_meta(‘ID’),’70’ ); ?><br/></span>
<?php the_content(); ?>
<?php endwhile; ?>
Go to your WordPress theme folder and create a new file called style.css . Paste the code below into it. If you are not sure how to do this then ask developers for help or follow our tutorial on creating a simple style sheet in WordPress .
Code <style type=”text/css”> .rating-stars { background: #000; width: 2.5em; height: 2.5em; margin: 14px 0 5px 0; padding: 0; font: normal 16px Georgia, Times New Roman, serif; vertical-align: top; display: inline-block;} .rating-stars img { vertical-align: middle;} .rating-label { font: normal 16px Georgia, Times New Roman, serif; vertical-align: top;} .rating-stars .rating-label { position: relative;} .rating-stars .rating-label:before, rating-stars .reviews-area:before { font: normal 16px Georgia, Times New Roman, serif; content: ‘\f10a’; vertical-align: top;} .rating-stars .reviews-area { display: inline;} .woocommerce .star-rating { width: 2.5em;} .reviews-area .stars img { margin: 0;padding: 0;} .reviews-area .stars { width: 100%;} .rating-stars .reviews-area { position: relative;margin: 0;} .woocommerce .star-rating, .woocommerce .rate span { display: none;} </style>
Now all you have to do is call the style in your WordPress theme’s functions.php file.
Code add_action( ‘wp_enqueue_scripts’, ‘theme118_style’ );function theme118_style() { wp_register_style( ‘theme118-custom’, get_stylesheet_directory_uri().’/style.css’ ); wp_enqueue_style( ‘theme118-custom’ ); }
Note: Theme developers can make use of hook, action or filter to enqueue scripts and styles. If you are not sure which one they are using then contact them or follow our tutorial on customizing WooCommerce themes .
