How to change WooCommerce icons in Ethos

Support
#1

Hi there

I would like to change the icons that appear on the Ethos WooCommerec product pages, for example the data-x-icon and the maginfying glass emoji. Can you point me towards the best way to do this?

Thanks

#2

Hey,

Thanks for using our product!

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Hi John

The url is https://pandoraspa.com/

Let me know if you need access to the site as the woocommerce pages are currently under development and not public at the moment.

Thanks
Andy

#4

Hi Andy,

Yes, would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#6

Details provided.

#7

Hello There,

Thank you for the very detailed information. The icon you want to change is with the entry top navigation function. You can change it by modifying the function itself. Simply add the following code into your child theme’s functions.php file

// Entry Top Navigation
// =============================================================================

if ( ! function_exists( 'x_ethos_entry_top_navigation' ) ) :
  function x_ethos_entry_top_navigation() {

    if ( x_is_portfolio_item() ) {
      $link = x_get_parent_portfolio_link();
    } elseif ( x_is_product() ) {
      $link = x_get_shop_link();
    }

    $title = esc_attr( __( 'See All Posts', '__x__' ) );

    ?>

      <div class="entry-top-navigation">
        <a href="<?php echo $link; ?>" class="entry-parent" title="<?php $title; ?>"><i class="x-icon-th" data-x-icon="&#xf00a;"></i></a>
        <?php x_entry_navigation(); ?>
      </div>

    <?php

  }
endif;

Please be very careful in inserting your code to avoid a fatal error. When that happens, you will be locked out from your dashboard and you need to access the file to fix the code only by accessing the file through FTP.

Hope this helps. Please let us know how it goes.

#8

Hi RueNel

Thanks for this, yes it works perfectly and allows me to change the x-icon-th to another font awesome icon.

I also asked about changing the magnifying glass emoji. How would I do this?

  • plus, is there a way to make the x-icon-th button return to a category archive page instead of the main shop page?

Thanks again
Andy

#9

Hello Andy,

Glad it works out for you.

For the magnifying class, are you referring to this image?

This image is a default from WooCommerce. If you want to change it, you may need to use custom css. please add the following css code in your child theme’s style.css

.woocommerce-product-gallery__trigger .emoji {
    display: none !important;
}

.woocommerce-product-gallery__trigger {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.woocommerce-product-gallery__trigger:before {
    content: "\f002";
}

You will have to add this code in your child theme. Do not add this in the global css because it may not work. The result would look like this:

Changing the link from Shop page to the category archive maybe possible with custom development. Please understand that this is beyond the scope of our support. This would require custom code in getting the category link which we cannot assure if we can be of greater help.

Thank you for your understanding.

#10

Great, all good.

Thanks again for that. I guess I will have to stretch my own mind around the button redirection…!

Andy

#11

You’re welcome, Andy.