Docs

[wai]

Hi there,

Question 1

I’m having trouble changing the way woocommerce presents products in archive. Here for example: https://www.mays.net.au/products/gemstones/pearl-gemstone/
I don’t know how to remove the mouseover function (title and price on grey shade moving up) and just have a standard title and price under the image. Like this: http://www.rutherford.com.au/jewellery-109/rings/sapphire.html
Note, I have added CSS code to remove the sale tag in the image and also the add to cart button. This has remove link to the single product page as well.

Question 2

I would like to remove the word ‘Archive’ from category archives page title. Like here:
https://www.mays.net.au/products/gemstones/pearl-gemstone/
Page title shows ‘Pearl Archive’ – I just want it to be ‘Pearl’

Question 3

For a category of my products, I would like to display the products in list form. Much like in Admin>Products so customers can have a detail list and sort the products by its attributes. Like this: http://www.torresjewelco.com.au/gemstones/emeralds.html
Is this possible with woocommerce?

Thanks for your help.

[wai]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please add following code in Customize -> Custom -> Global CSS :

.woocommerce li.product .entry-wrap {
    top: calc(100% - 10.385em);
}
.woocommerce li.product .entry-wrap {
    position: inherit;
    top: calc(100% - 4em);

}
.woocommerce li.product .entry-header h3 {
    text-overflow: inherit;
    white-space: normal;
}
.woocommerce li.product .entry-featured {
    min-height: 101px;
}

#2 Please add ‘Archive title’ to your category, see the attachment.

#3 Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Hope that helps.

[wai]

Thanks for your help.

#1
Is not quite the result I was after. It was a poor example I gave. Here is a better example of the result I’m after. And, if possible, add an attribute (Dimensions)of the product in between the title and price.
http://demo.woothemes.com/storefront/product-category/kitchen/

#2
I have tried this and the result is the same. I changed it to “somethingelse” and the title still shows ‘Pearl Archive’.
https://www.mays.net.au/products/gemstones/pearl-gemstone/

#3
Thanks for the advise.

#4
https://www.mays.net.au/products/gemstones/pearl-gemstone/

Is there a way to show a more precise breadcrumb?
At the moment the breadcrumb to Pearl category is:
Gems & Jewellery > Pearl
or
Gems & Jewellery > (Product)

I want it to show:
Gems & Jewellery > Gemstones > Pearl >
and to each product:
Gems & Jewellery > Category > Sub-category > Product

[Rue Nel]

Hello There,

Thanks for updating in!

1] To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce li.product .entry-wrap {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0;
    font-size: 14px;
    -webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
}

.woocommerce li.product .entry-wrap:before {
    display: none;
}

.woocommerce li.product .entry-header .price>del {
    display: block;
}

body.woocommerce .price,
.woocommerce li.product .entry-header h3,
.woocommerce li.product .entry-header h3 a {
    color: #000;
}

2] Please refer to this screenshot: http://prntscr.com/d8ahgb
You should be getting something like this: http://prntscr.com/d8ai63

I can see that you have hidden the Landmark titles so I am assuming that you are referring to the Page Title in the browser Tab? To resolve this issue, please install 3rd party plugin Yoast SEO plugin and edit your Titles and Metas. For more information, please check this out:
http://proserveweb.com/change-woocommerce-product-archives-page-title/
https://kb.yoast.com/kb/how-do-i-change-the-woocommerce-shop-page-title/

4] To resolve this issue, please check out this topic: https://community.theme.co/forums/topic/not-show-woocommerce-parent-in-breadcrumb/#post-814963

Hope this helps.

[wai]

Thanks for you help. Its getting closer to what I want.

#1
I added a few changes and the css above seems to be working to my liking. Except, I want to add the dimension (an attribute) of the product between the title and price.
And if I display the products 3 in a column, the title gets squeezed. Can the title be in 2 lines or adjust font size automatically to display the full title?

I have changed the settings to display 2 products per column because of this.

#2
Wanted to changed the browser title. I will work it out, thanks!

#4
Thanks, I will check it out.

#5
https://www.mays.net.au/product/gemstones/5-01ct-burmese-jadeite/

Please refer to example link above. There are borders now appearing on related products. I just want border around the image not like what it is at the moment.

#6
If I wanted to display the sub-categories in 3 or 4 columns, is this possible here:
https://www.mays.net.au/products/gemstones/
But in product gallery it should be in 2 columns like it is set now.

Login details in replies above.

[Rad]

Hi there,

1. Is it on archive page or single product page? You can’t add attributes on product archives, and I checked your single product page and the dimension is within the tabbed description. It is the one that needs moving?

5. Please add this CSS as well,

.woocommerce .related ul.products li.product {
    border: 0px;
}
.woocommerce .related ul.products li.product .entry-featured {
    border: 1px solid rgba(0,0,0,0.1);
}

6. Yes possible, please add this code to your child theme’s functions.php

add_filter('x_option_x_woocommerce_shop_columns', 'x_term_column');

function x_term_column ( $cols ) {

if ( is_product_category() && get_queried_object()->term_id == 329 ) {

return 3;

}

return $cols;

}

Hope these helps 🙂

[wai]

#1
Resolved, many thanks!

#4
Breadcrumbs – Please have a look at the links below.
I added the function to my child theme. And it works great, just how I wanted it, almost.
Just minor display issue:
a) There are 2 home links and on 2 seperate lines. I want the breadcrumbs to be in a single line.
b) I’d like the separators to be “>” instead on “/”

I found on other pages it work on the top breadcrumbs line.
example: https://www.mays.net.au/terms-and-conditions/

And with products, the bottom line appears:
https://www.mays.net.au/product/gemstones/4-36ct-myanmar-south-sea-pearl/

Ultimately, I want just one line with a home icon and “>”.

[Nabeel A]

Hi again,

Try adding the following code in your child theme’s style.css file:

.woocommerce .x-breadcrumbs>a, .woocommerce .x-breadcrumbs>.delimiter {
    display: none !important;
}
nav.woocommerce-breadcrumb a:first-child:before {
    content: "\f015";
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 2px
}

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('nav.woocommerce-breadcrumb a:first-child').html("");
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[wai]

Working fine, thanks! I didn’t add the jQuery and just have the home icon and ‘home’ text together.
The separators are still “/” not “>”.
Can this be changed?

And Is different from page breadcrumbs. Check:
https://www.mays.net.au/terms-and-conditions/

Can the breadcrumbs be the uniform through out the site?

[Rue Nel]

Hello There,

Thanks for updating in! To have a uniform delimiter for both the WooCommerce page and the site pages, please find this line in your child theme’s functions.php file

if ( x_is_shop() ) {
  
  woocommerce_breadcrumb();

}

and replace it with this code:

if ( x_is_shop() ) {

  $args = array(
      'delimiter' => x_get_breadcrumb_delimiter()
  );
  woocommerce_breadcrumb( $args );

}

We would loved to know if this has work for you. Thank you.

[wai]

I don’t think that has worked for me but I could have replaced the code wrongly. Please double check for me. Login details in previous reply.

[Rue Nel]

Hello There,

Sorry if it didn’t work out. I thought it is only have one line. It turns out that there is 4 lines that uses that code. So I went ahead and updated the code:

// Breadcrumbs Display Category Name
// =============================================================================

function x_breadcrumbs() {

    if ( x_get_option( 'x_breadcrumb_display' ) ) {

      GLOBAL $post;

      $is_ltr         = ! is_rtl();
      $stack          = x_get_stack();
      $delimiter      = x_get_breadcrumb_delimiter();
      $home_text      = x_get_breadcrumb_home_text();
      $home_link      = home_url();
      $current_before = x_get_breadcrumb_current_before();
      $current_after  = x_get_breadcrumb_current_after();
      $page_title     = get_the_title();
      $blog_title     = get_the_title( get_option( 'page_for_posts', true ) );
      $args = array(
           	'delimiter' => x_get_breadcrumb_delimiter()
  	   );

      if ( ! is_404() ) {
        $post_parent = $post->post_parent;
      } else {
        $post_parent = '';
      }

      if ( X_WOOCOMMERCE_IS_ACTIVE ) {
        $shop_url   = x_get_shop_link();
        $shop_title = x_get_option( 'x_' . $stack . '_shop_title' );
        $shop_link  = '<a href="'. $shop_url .'">' . $shop_title . '</a>';
      }

      echo '<div class="x-breadcrumbs"><a href="' . $home_link . '">' . $home_text . '</a>' . $delimiter;

        if ( is_home() ) {

          echo $current_before . $blog_title . $current_after;

        } elseif ( is_category() ) {

          $the_cat = get_category( get_query_var( 'cat' ), false );
          if ( $the_cat->parent != 0 ) echo get_category_parents( $the_cat->parent, TRUE, $delimiter );
          echo $current_before . single_cat_title( '', false ) . $current_after;

        } elseif ( x_is_product_category() ) {

          woocommerce_breadcrumb( $args );

        } elseif ( x_is_product_tag() ) {

          woocommerce_breadcrumb( $args );

        } elseif ( is_search() ) {

          echo $current_before . __( 'Search Results for ', '__x__' ) . '“' . get_search_query() . '”' . $current_after;

        } elseif ( is_singular( 'post' ) ) {

          if ( get_option( 'page_for_posts' ) == is_front_page() ) {
            echo $current_before . $page_title . $current_after;
          } else {
            if ( $is_ltr ) {
              echo '<a href="' . get_permalink( get_option( 'page_for_posts' ) ) . '">' . $blog_title . '</a>' . $delimiter . $current_before . $page_title . $current_after;
            } else {
              echo $current_before . $page_title . $current_after . $delimiter . '<a href="' . get_permalink( get_option( 'page_for_posts' ) ) . '">' . $blog_title . '</a>';
            }
          }

        } elseif ( x_is_portfolio() ) {

          echo $current_before . get_the_title() . $current_after;

        } elseif ( x_is_portfolio_item() ) {

          $link  = x_get_parent_portfolio_link();
          $title = x_get_parent_portfolio_title();

          if ( $is_ltr ) {
            echo '<a href="' . $link . '">' . $title . '</a>' . $delimiter . $current_before . $page_title . $current_after;
          } else {
            echo $current_before . $page_title . $current_after . $delimiter . '<a href="' . $link . '">' . $title . '</a>';
          }

        } elseif ( x_is_product() ) {

  	   woocommerce_breadcrumb( $args );

        } elseif ( x_is_buddypress() ) {

          if ( bp_is_group() ) {
            echo '<a href="' . bp_get_groups_directory_permalink() . '">' . x_get_option( 'x_buddypress_groups_title' ) . '</a>' . $delimiter . $current_before . x_buddypress_get_the_title() . $current_after;
          } elseif ( bp_is_user() ) {
            echo '<a href="' . bp_get_members_directory_permalink() . '">' . x_get_option( 'x_buddypress_members_title' ) . '</a>' . $delimiter . $current_before . x_buddypress_get_the_title() . $current_after;
          } else {
            echo $current_before . x_buddypress_get_the_title() . $current_after;
          }

        } elseif ( x_is_bbpress() ) {

          remove_filter( 'bbp_no_breadcrumb', '__return_true' );

          if ( bbp_is_forum_archive() ) {
            echo $current_before . bbp_get_forum_archive_title() . $current_after;
          } else {
            echo bbp_get_breadcrumb();
          }

          add_filter( 'bbp_no_breadcrumb', '__return_true' );

        } elseif ( is_page() && ! $post_parent ) {

          echo $current_before . $page_title . $current_after;

        } elseif ( is_page() && $post_parent ) {

          $parent_id   = $post_parent;
          $breadcrumbs = array();

          if ( is_rtl() ) {
            echo $current_before . $page_title . $current_after . $delimiter;
          }

          while ( $parent_id ) {
            $page          = get_page( $parent_id );
            $breadcrumbs[] = '<a href="' . get_permalink( $page->ID ) . '">' . get_the_title( $page->ID ) . '</a>';
            $parent_id     = $page->post_parent;
          }

          if ( $is_ltr ) {
            $breadcrumbs = array_reverse( $breadcrumbs );
          }

          for ( $i = 0; $i < count( $breadcrumbs ); $i++ ) {
            echo $breadcrumbs[$i];
            if ( $i != count( $breadcrumbs ) -1 ) echo $delimiter;
          }

          if ( $is_ltr ) {
            echo $delimiter . $current_before . $page_title . $current_after;
          }

        } elseif ( is_tag() ) {

          echo $current_before . single_tag_title( '', false ) . $current_after;

        } elseif ( is_author() ) {

          GLOBAL $author;
          $userdata = get_userdata( $author );
          echo $current_before . __( 'Posts by ', '__x__' ) . '“' . $userdata->display_name . $current_after . '”';

        } elseif ( is_404() ) {

          echo $current_before . __( '404 (Page Not Found)', '__x__' ) . $current_after;

        } elseif ( is_archive() ) {

          if ( x_is_shop() ) {

  		woocommerce_breadcrumb( $args );

          } else {
            echo $current_before . __( 'Archives ', '__x__' ) . $current_after;
          }

        }

      echo '</div>';

    }

  }

// =============================================================================

Please check out your site now.

[wai]

Working great now. Thanks so much! 🙂

[Rue Nel]

You’re most welcome. That’s what we are here for!
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts