Docs

[ArtOfSpring]

Hi there,

on my site: http://stage3.art-of-spring.marketing/produkt/namasake-junmai/
I have a short description next to the product. In this case it’s:
“Kurzprofil: Jugendlich, spritzig, moussierend: der Kinko Nama ist eine Fruchtsensation mit knackigen Aromen von Kiwi, Banane und tropischen Früchten.”

The short description should end with a “Mehr” (More) anchor link to the description tab underneath the product.
Before I updatet X to the latest version there was an id I could refer to but it’s not there anymore.

Can I customize it?

Thank you

[ArtOfSpring]

This reply has been marked as private.

[ArtOfSpring]

One more thing.

I’m using breadcrumbs but hey need a bit customization.
Instead of the woocommerce standard shop page (http://stage3.art-of-spring.marketing/shop/)
I want to use my custom page (http://stage3.art-of-spring.marketing/shop/)

If you go to a product page (e.g. http://stage3.art-of-spring.marketing/produkt/takizawa-junmai-nigori/)
and click on “shop” in the breadcrumbs it leads to the standard woocommerce shop. How can I change it to my custom page?

Thank you

[Christian]

Hey there,

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 might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[ArtOfSpring]

Hi there,

thanks for your reply.

In another topic an x customer asked for a solution to exchange the woocommerce description tab with an accordion.
That’s why I thought this would also be within your scope. The shop integration from the integrity stack was the only reason for me to use the x theme for this project.

Isn’t there a simple way to add an id to the woocommmerce desription tap without losing it due to the next woocommerce update?
Before I updated X there was an id I could refer to with an anchor link.

I would really appreciate your support.

Thank you

[Rad]

Hi there,

Those links are generated by Woocommerce and only displayed by the theme. Though, you can customize it from this file, \wp-content\themes\x\framework\functions\global\breadcrumbs.php

And if you wish to protect it from future updates, then you’ll have to copy the code to your child theme’s functions.php, example,

 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 ) );

      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() ) {

          if ( $is_ltr ) {
            echo $shop_link . $delimiter . $current_before . single_cat_title( '', false ) . $current_after;
          } else {
            echo $current_before . single_cat_title( '', false ) . $current_after . $delimiter . $shop_link;
          }

        } elseif ( x_is_product_tag() ) {

          if ( $is_ltr ) {
            echo $shop_link . $delimiter . $current_before . single_tag_title( '', false ) . $current_after;
          } else {
            echo $current_before . single_tag_title( '', false ) . $current_after . $delimiter . $shop_link;
          }

        } 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() ) {

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

        } 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() ) {
            echo $current_before . $shop_title . $current_after;
          } else {
            echo $current_before . __( 'Archives ', '__x__' ) . $current_after;
          }

        }

      echo '</div>';

    }

  }

Please note that it will only change the Shop’s breadcrumb URL, but it will not change the shop URL configured to Woocommerce. You should utilize your Woocommerce setting instead of just changing the URL.

Thanks!

[ArtOfSpring]

Thank you so much for your response! Highly appreciated 🙂

Is there also a simple way to add an id to the woocommmerce desription tap on the product page (e.g.: http://stage3.art-of-spring.marketing/produkt/takizawa-junmai-nigori/) without losing it due to the next woocommerce update?

I would like to target it with an anchor link on the same page.

[Rue Nel]

Hello There,

You can apply the same solution as stated from this topic: https://community.theme.co/forums/topic/jvs-for-tabs-links-stopped-working/#post-864178

By using this JS code:

(function($){
  var tabnav = location.href.split("#tab-").slice(-1)[0];

  if ( tabnav || tabnav != '' ) {

    console.log(tabnav);

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top;
    console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
    console.log('tab: ' + tabnav + ', yloc: ' + yloc);

    $('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').trigger('click');

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  }
  
})(jQuery);

You can have a link like this: http://stage3.art-of-spring.marketing/produkt/takizawa-junmai-nigori#tab-1 so that you can target the description tab content.

Please let us know if this works out for you.

[ArtOfSpring]

It works fine. Thank you!

I have a fixed header, that’s why the target point is hidden underneath it:
https://tokuri.de/produkt/takizawa-junmai-nigori/#tab-1

Is there a way to add something like a -150px Gap to the target?

[Rad]

Hi there,

From the above code,

You can change this line scrollTop: yloc to something like this

scrollTop: yloc - 150

or

scrollTop: yloc + 150

It depends on your preference.

Cheers!

[ArtOfSpring]

Hi there,

the positioning worked, thank you 🙂

But it turned out that the link only works if you paste it directly into your browser like that:
https://tokuri.de/produkt/takizawa-junmai-nigori/#tab-1

When you are on the product page and click on the “Mehr” anchor link (see attachment) it’s not scrolling to the anchors position. (Using Chrome)

In Firefox it’s not working at all

[Joao]

Hi There,

I am getting 404 on your Shop page at the moment.

Not Found

The requested URL /shop-2/ was not found on this server.

Same on

Not Found

The requested URL /produkt/takizawa-junmai-nigori/ was not found on this server.

Is it working on your end?

Let us know details.

Thanks

Joao

[ArtOfSpring]

Hi there please try again. I had some trouble with the server using Gzip compression.
(Update of permalinks was missing)

[Rad]

Hi there,

The code provided is applicable on page load not on clicked link. You need another set of code for that.

jQuery( function( $ ) {

$('a[href="#description-tab"]').on('click', function(e) {

e.preventDefault();

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $('.woocommerce-tabs .x-tab-content [data-cs-tab-index="1').offset().top;

    $('.woocommerce-tabs .x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="1"]').trigger('click');

    $('html, body').stop().animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');

} );

} );

Hope this helps.

[ArtOfSpring]

Perfect!

Thank you so much. Saved me hours 🙂

[Author]

Posts