Product Category Text should be displayed above products

[Floow]

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

 

[Harry]

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

[Floow]

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 🙂

[Harry]

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

[Floow]

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! 🙂

[Floow]

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.

[Harry]

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

[Floow]

how do i do this

[Harry]

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

[Floow]

Worked perfectly 🙂

[Author]

Posts