Tech

Have you ever tried any premium WordPress WooCommerce themes

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!

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.

2. Change WooCommerce Themes Footer area

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 .

 

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular

To Top