[Tristan AParticipant]

Hi there!

I have changed my Woocommerce template (using child theme off course) to make a sophisticated filter (Woof Filter plugin) appear on top of the shop page.

This is the code for my loop-start.php file in /public/wp-content/themes/x-child/woocommerce/loop:

<?php

// =============================================================================
// WOOCOMMERCE/LOOP/LOOP-START.PHP
// -----------------------------------------------------------------------------
// @version 2.0.0
// =============================================================================

?>
<? echo do_shortcode('[woof sid="auto_shortcode" autohide=0 taxonomies=product_cat:9]'); ?>
<?php $columns      = x_get_option( 'x_woocommerce_shop_columns' ); ?>
<?php $column_class = ( is_shop() || is_product_category() || is_product_tag() ) ? ' cols-' . $columns : ''; ?>

<ul class="products<?php echo $column_class; ?>">

This works fine. I have two questions however:

I would like to actually have the filter inside an accordion shortcode, so i changed the above to:

<?php

// =============================================================================
// WOOCOMMERCE/LOOP/LOOP-START.PHP
// -----------------------------------------------------------------------------
// @version 2.0.0
// =============================================================================

?>
<? echo do_shortcode('[accordion class="shopfilter" open="false"][accordion_item title="Product filter"][woof sid="auto_shortcode" autohide=0 taxonomies=product_cat:9][/accordion_item][/accordion]'); ?>
<?php $columns      = x_get_option( 'x_woocommerce_shop_columns' ); ?>
<?php $column_class = ( is_shop() || is_product_category() || is_product_tag() ) ? ' cols-' . $columns : ''; ?>

<ul class="products<?php echo $column_class; ?>">

Again this works fine.

However, i struggle to get the layout right.

First of all , when on the shop page the accordion is opened, it resizes to 100% width, which looks really strange. Rather, I would like to keep the width of the opened accordeon to the same as the closed accordion. How do I do this?

The second problem is, that the regular Woocommerce ordering forms appear on the same line. This looks odd. Rather, i would have them a moved a little downwards. How can this be done?

Kind regards,

Tristan

[Tristan AParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-accordion.shopfilter {
    display: block;
    float: left;
    width: 100%;
}

I also set the shop title under Customizer > Ethos > SHOP OPTIONS:

View post on imgur.com

Regards!

[Tristan AParticipant]

Thanks!

Also appears that i should probably do this with the product-archive.php template instead!

[Tristan AParticipant]

Thanks again!

I also created a product-archive.php template file in my childtheme folder /woocommerce, because according to Woocommerce documentation, the product-archive.php file really is the template to do the shop and archive layouts. However, the code doesn’t seem to be working there, at least i don’t see it appearing on my page??

This is what the product-archive.php looks like in /public/wp-content/themes/x-child/woocommerce

<?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/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header( 'shop' ); ?>

	<?php
		/**
		 * woocommerce_before_main_content hook.
		 *
		 * @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' );
	?>

    <header class="woocommerce-products-header">

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

    </header>

		<?php if ( have_posts() ) : ?>

			<?php
				/**
				 * woocommerce_before_shop_loop hook.
				 *
				 * @hooked woocommerce_result_count - 20
				 * @hooked woocommerce_catalog_ordering - 30
				 */
				do_action( 'woocommerce_before_shop_loop' );
			?>

<? echo do_shortcode('[accordion class="shopfilter" open="false"][accordion_item title="Product filter"][woof sid="auto_shortcode" autohide=0 taxonomies=product_cat:9][/accordion_item][/accordion]'); ?>

			<?php woocommerce_product_loop_start(); ?>

				<?php woocommerce_product_subcategories(); ?>

				<?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_part( 'content', 'product' ); ?>

				<?php endwhile; // end of the loop. ?>

			<?php woocommerce_product_loop_end(); ?>

			<?php
				/**
				 * woocommerce_after_shop_loop hook.
				 *
				 * @hooked woocommerce_pagination - 10
				 */
				do_action( 'woocommerce_after_shop_loop' );
			?>

		<?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

			<?php
				/**
				 * woocommerce_no_products_found hook.
				 *
				 * @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
		/**
		 * woocommerce_sidebar hook.
		 *
		 * @hooked woocommerce_get_sidebar - 10
		 */
		do_action( 'woocommerce_sidebar' );
	?>

<?php get_footer( 'shop' ); ?>

[ChristopherModerator]

Hi there,

I don’t see false on your archive pages. If you wish to change category archive title, please add Archive title.

Hope it helps.

[Tristan AParticipant]

Ok,

I just found out that X uses woocommerce.php instead, so i created one in x-child/framework/views/ethos.

It looks like this:

<?php

// =============================================================================
// VIEWS/ETHOS/WOOCOMMERCE.PHP
// -----------------------------------------------------------------------------
// WooCommerce page output for Ethos.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container max width main">
    <div class="offset cf">
      <div class="<?php x_main_content_class(); ?>" role="main">

        <?php if ( x_is_product() ) : ?>
          <?php x_ethos_entry_top_navigation(); ?>
        <?php endif; ?>
<? echo do_shortcode('[accordion class="shopfilter" open="false"][accordion_item title="Product filter"][woof sid="auto_shortcode" autohide=0 taxonomies=product_cat:9][/accordion_item][/accordion]'); ?>
        <?php woocommerce_content(); ?>

      </div>

      <?php get_sidebar(); ?>

    </div>
  </div>

<?php get_footer(); ?>

The weird thing is, it is still not showing up. But if i put it in loop-start.php (where it doesn’t belong) it does show??

[ThaiModerator]

Hi There,

You don’t have to copy those files to child theme, just add the following code under functions.php file locates in your child theme:

add_action( 'woocommerce_before_shop_loop', 'x_print_shortcode', 999 );
function x_print_shortcode(){
	echo do_shortcode('[accordion class="shopfilter" open="false"][accordion_item title="Product filter"][woof sid="auto_shortcode" autohide=0 taxonomies=product_cat:9][/accordion_item][/accordion]');
}

Let us know how it goes!

[Tristan AParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please update the previous code to this:

add_action( 'woocommerce_before_shop_loop', 'x_print_shortcode' );
function x_print_shortcode(){
	echo do_shortcode('[accordion class="shopfilter" open="false"][accordion_item title="Product filter"][woof sid="auto_shortcode" autohide=0 taxonomies=product_cat:9][/accordion_item][/accordion]');
}

Regards!

[Tristan AParticipant]

Thanks! Perfect!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts