Home Forums Themes Support Claue Product Category Text should be displayed above products

Topic Resolution: Resolved

This topic contains 9 replies, has 2 voices, and was last updated by  Floow 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #27151

    Hi Harry,

    I want that the product category text should be displayed above or under the product description

    You already did this here (for above the description) for the Gecko Theme :

    Category text

    Would be nice if you could make it fit for the Claue theme as well. And if you could provide a possibility to make the text below the product listing, too.

    Greetings,

    Florian

     

    #27164

    Hi Floow,

    Please add below code to claue-child > functions.php

    function remove_shop_heading() {
        remove_action( 'woocommerce_before_main_content', 'jas_claue_wc_page_head', 15 );
    }
    add_action('wp_head', 'remove_shop_heading');
    
    function jas_claue_child_wc_page_head() {
    	if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;
    
    	$title = cs_get_option( 'wc-page-title' );
    
    	$output = '<div class="page-head pr tc"><div class="jas-container pr">';
    		if ( is_search() ) {
    			$output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'claue' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
    		} elseif ( is_shop() ) {
    			$output .= '<h1 class="mb__5 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
    			//$output .= '<p class="mg__0">' . do_shortcode( cs_get_option( 'wc-page-desc' ) ) . '</p>';
                
    		} else {
    			// Remove old position of category description
    			remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    
    			$output .= '<h1 class="cw">' . single_cat_title( '', false ) . '</h1>';
    			add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );
    		}
    		ob_start();
    		$output .= ob_get_clean();
    	$output .= '</div></div>';
    
    	echo wp_kses_post( $output );
    }
    add_action( 'woocommerce_before_main_content', 'jas_claue_child_wc_page_head', 15 );

    and add below code to claue-child > style.css

    .woocommerce-pagination {
    	margin: 60px auto 10px;
    }
    .term-description {
    	display: block;
    }

    Regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #27798

    Hi Harry,

    this worked very well for placing the category text below the shopping results.

    I have on my shop side a left sidebar and the shop has 3 columns. I want that the text is not full width and one the same width as the products.Is this possible with some quick CSS?

    The same thing you did here in general http://support.janstudio.net/forums/topic/category-text/

    Thank you & have a good day 🙂

    #27803

    Hi,

    I implemented code on your staging site claue-child > woocommerce > archive-product.php

    or you can copy below code and replace all code in claue-child > woocommerce > archive-productphp

    <?php
    /**
     * The Template for displaying product archives, including the main shop page which is a post type archive
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
     *
     * HOWEVER, on occasion WooCommerce will need to update template files and you
     * (the theme developer) will need to copy the new files to your theme to
     * maintain compatibility. We try to do this as little as possible, but it does
     * happen. When this occurs the version of the template file will be bumped and
     * the readme will list any important changes.
     *
    * @see https://docs.woocommerce.com/document/template-structure/
     * @package WooCommerce/Templates
     * @version 3.4.0
     */
    
    defined( 'ABSPATH' ) || exit;
    
    $class = $data = $sizer = '';
    
    global $jassc;
    
    // Get wc layout
    $class = '';
    $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
    if ( $term ) {
    	$term_options = get_term_meta( $term->term_id, '_custom_product_cat_options', true );
    }
    if ( is_product_category() && isset( $term_options ) && $term_options && $term_options['product-cat-layout'] ) {
    	$layout = $term_options['product-cat-layout'];
    	$sidebar = $term_options['product-cat-sidebar'];
    } else {
    	$layout = cs_get_option( 'wc-layout' );
    	$sidebar = cs_get_option( 'wc-sidebar' );
    }
    
    if ( cs_get_option( 'wc-sub-cat-layout' ) == 'masonry' ) {
    	$class = 'jas-masonry';
    	$data  = 'data-masonry=\'{"selector":".product", "columnWidth":".grid-sizer","layoutMode":"masonry"}\'';
    	$sizer = '<div class="grid-sizer size-' . cs_get_option( 'wc-sub-cat-column' ) . '"></div>';
    }
    
    $fullwidth = cs_get_option( 'wc-layout-full' );
    
    // Sidebar filter
    $sfilter = cs_get_option( 'wc-sidebar-filter' );
    
    $shop_display = false;
    
    if ( ! is_shop() ) {
    	$term = get_queried_object();
    	$display_type = get_woocommerce_term_meta( $term->term_id, 'display_type', true );
    }
    
    if ( is_tax( 'product_cat' ) && $display_type ) {
    	$term = get_queried_object();
    	$display_type = get_woocommerce_term_meta( $term->term_id, 'display_type', true );
    } else {
    	$display_type = get_option( 'woocommerce_category_archive_display' );
    }
    
    if ( get_option( 'woocommerce_shop_page_display' ) || 'subcategories' == $display_type || 'both' == $display_type ) {
    	$shop_display = true;
    }
    
    get_header( 'shop' ); ?>
    
    	<?php
    		/**
    		 * Hook: woocommerce_before_main_content.
    		 *
    		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
    		 * @hooked woocommerce_breadcrumb - 20
    		 * @hooked WC_Structured_Data::generate_website_data() - 30
    		 */
    		do_action( 'woocommerce_before_main_content' );
    	?>
    
    	<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
    
    		<h1 class="woocommerce-products-header__title  page-title"><?php woocommerce_page_title(); ?></h1>
    
    	<?php endif; ?>
    
    	<?php
    		/**
    		 * woocommerce_archive_description hook.
    		 *
    		 * @hooked woocommerce_taxonomy_archive_description - 10
    		 * @hooked woocommerce_product_archive_description - 10
    		 */
    		//do_action( 'woocommerce_archive_description' );
    	?>
    <?php if ( $fullwidth ) echo '<div class="jas-full pl__30 pr__30">'; elseif ( ! $fullwidth ) echo '<div class="jas-container">'; ?>
    	<?php if ( have_posts() ) : ?>
    		<?php if ( $shop_display ) { ?>
    			<div class="sub-categories mt__30">
    				<div class="jas-row <?php echo esc_attr( $class ); ?>" <?php echo wp_kses_post( $data ); ?>>
    					<?php
    						echo wp_kses_post( $sizer );
    						woocommerce_product_subcategories();
    					?>
    				</div>
    			</div>
    		<?php } ?>
    		<?php
    			if ( $sfilter ) {
    				echo '<div class="jas-filter-wrap pr">';
    					echo '<div class="filter-sidebar bgbl pf ' . esc_attr( cs_get_option( 'wc-sidebar-filter-position' ) ) . '">';
    						echo '<h3 class="mg__0 tc cw bgb tu ls__2 visible-sm">' . esc_html__( 'Filter', 'claue' ) . '<i class="close-filter pe-7s-close pa"></i></h3>';
    						echo '<div class="filter-content">';
    							dynamic_sidebar( 'wc-filter' );
    						echo '</div>';
    					echo '</div>';
    				echo '</div>';
    			}
    		?>
    		<?php if ( is_active_sidebar( 'wc-categories' ) ) : ?>
    			<div class="shop-top-sidebar">
    				<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'wc-categories' ) ) : endif; ?>
    			</div>
    		<?php endif; ?>
    		<?php
    			/**
    			 * Hook: woocommerce_before_shop_loop.
    			 *
    			 * @hooked wc_print_notices - 10
    			 * @hooked woocommerce_result_count - 20
    			 * @hooked woocommerce_catalog_ordering - 30
    			 */
    			do_action( 'woocommerce_before_shop_loop' );
    			//do_action( 'woocommerce_archive_description' );
    		?>
    		
    		<?php wc_print_notices(); ?>
    		
    			<?php
    			if ( $layout != 'no-sidebar' && ! $jassc ) {
    				echo '<div class="jas-row"><div class="jas-col-md-9 jas-col-sm-9 jas-col-xs-12">';
    				
    				}
    			?>
    				<?php do_action( 'woocommerce_archive_description' ); ?>
    				<?php woocommerce_product_loop_start();  ?>
    				
    					<?php while ( have_posts() ) : the_post(); ?>
    
    						<?php
    							/**
    							 * woocommerce_shop_loop hook.
    							 *
    							 * @hooked WC_Structured_Data::generate_product_data() - 10
    							 */
    							do_action( 'woocommerce_shop_loop' );
    						?>
    
    						<?php wc_get_template( 'content-product.php' ); ?>
    
    					<?php endwhile; ?>
    
    				<?php woocommerce_product_loop_end(); ?>
    
    			<?php
    				/**
    				 * woocommerce_after_shop_loop hook.
    				 *
    				 * @hooked woocommerce_pagination - 10
    				 */
    				
    			?>
    
    			<?php if ( $layout == 'right-sidebar' ) {
    				$class = 'sidebar jas-col-md-3 jas-col-sm-3 jas-col-xs-12 mt__30';
    			} elseif ( $layout == 'left-sidebar' ) {
    				$class = 'sidebar jas-col-md-3 jas-col-sm-3 jas-col-xs-12 mt__30 first-md first-sm';
    			}
    
    			if ( $layout != 'no-sidebar' && ! $jassc ) {
    				// Render pagination
    				do_action( 'jas_pagination' );
    				do_action( 'woocommerce_after_shop_loop' );
    				
    				echo '</div><!-- .jas-columns-* -->';
    
    				echo '<div class="' . esc_attr( $class ) . '">';
    					if ( is_active_sidebar( $sidebar ) ) {
    						dynamic_sidebar( $sidebar );
    					}
    				echo '</div><!-- .jas-sidebar -->';
    				echo '</div><!-- .jas-row -->';
    
    			}?>
    		
    		<?php
    			if ( $layout == 'no-sidebar' && ! $jassc ) {
    				do_action( 'jas_pagination' );
    				do_action( 'woocommerce_after_shop_loop' );
    			}
    		?>
    		<?php  // Full width layout
    			$fullwidth = cs_get_option( 'wc-layout-full' );
    		?>
    
    		<?php if ( $sfilter ) echo '</div>'; ?>
    
    		<?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>
    
    		<?php wc_get_template( 'loop/no-products-found.php' ); ?>
    	</div>
    	
    	<?php else : ?>
    		<?php
    			/**
    			 * Hook: woocommerce_no_products_found.
    			 *
    			 * @hooked wc_no_products_found - 10
    			 */
    			do_action( 'woocommerce_no_products_found' );
    		?>
    	<?php endif; ?>
    	
    <?php
    	/**
    	 * woocommerce_after_main_content hook.
    	 *
    	 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
    	 */
    	do_action( 'woocommerce_after_main_content' );
    ?>
    <?php get_footer( 'shop' ); ?>

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #27804

    I copied the child theme folder into my live site, copied pasted the CSS I had and now everything works out fine 🙂

    Thanks for that! 🙂

    #28799

    Hi Harry,

    one little problem occured.

    When I am on a category page for example this one: https://bit.ly/2DvpsaD

    and select a filter for example for accessiores, the cateogry text got displayed above the products see here:

    https://bit.ly/2DZHkeQ

    Maybe you got a quick solution for this.

    Thank you.

    #28805

    Hi,

    You should move category description below products

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #28826

    how do i do this

    #28831

    Hi,

    Please move code

    <?php do_action( 'woocommerce_archive_description' ); ?> from line 145 to line 164 http://prntscr.com/mj3ukb in file archive-product.php

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #28848

    Worked perfectly 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.