How do I place products in the carousel of ethos 1

I need to know how to place products within the carousel? I know if post can be added their has to be a way to add products. Thanx

Hello Mickey,

Thanks for asking. :slight_smile:

Showing up product in post carousel will require some custom development changes which falls outside the scope of support we can offer. Having said that I can point you in the right direction and you can take it up from there.

  1. Please install and setup child theme using following resource.

You can use following resources to download and setup child theme.

Download Child theme from following source: https://theme.co/apex/child-themes

Please take a look at following article to setup child theme:

  1. After that please copy _post-carousel.php file from /wp-content/themes/x/framework/legacy/cranium/headers/views/ethos/ under /wp-content/themes/x-child/framework/legacy/cranium/headers/views/ethos/. You will have to create the child folder in same order in child theme.
  2. Finally, around line number 28 please replace following code:
case 'random' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );

With

  case 'random' :
    $args = array(
      'post_type'      => 'product',
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );

Thanks.

I already use the child theme (did my homework) but the rest is greek to me I’m sorry. I have know clue even after search my website where I would put that code.

Hey Mickey,

Since you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-CAROUSEL.PHP
// -----------------------------------------------------------------------------
// Outputs the post carousel that appears at the top of the masthead.
// =============================================================================

GLOBAL $post_carousel_entry_id;

$post_carousel_entry_id = get_the_ID();

$is_enabled = x_get_option( 'x_ethos_post_carousel_enable' ) == '1';
$count      = x_get_option( 'x_ethos_post_carousel_count' );
$display    = x_get_option( 'x_ethos_post_carousel_display' );

switch ( $display ) {
  case 'most-commented' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'comment_count',
      'order'          => 'DESC'
    );
    break;
  case 'random' :
    $args = array(
      'post_type'      => 'product',
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );
    break;
  case 'featured' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'date',
      'meta_key'       => '_x_ethos_post_carousel_display',
      'meta_value'     => 'on'
    );
    break;
}

?>

<?php if ( $is_enabled ) : ?>

  <?php $wp_query = new WP_Query( $args ); ?>

  <?php if ( $wp_query->post_count > 0 ) : ?>

    <ul class="x-post-carousel unstyled">

      <?php if ( $wp_query->have_posts() ) : ?>
        <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

          <li class="x-post-carousel-item">
            <?php x_ethos_entry_cover( 'post-carousel' ); ?>
          </li>

        <?php endwhile; ?>
      <?php endif; ?>

      <script>

      jQuery(document).ready(function() {
        jQuery('.x-post-carousel').xSlick({
          speed          : 500,
          slide          : 'li',
          slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large' ); ?>,
          slidesToScroll : 1,
          rtl            : <?php echo json_encode( is_rtl() ); ?>,
          responsive     : [
            { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_large' ); ?> } },
            { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_medium' ); ?> } },
            { breakpoint : 979,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_small' ); ?> } },
            { breakpoint : 550,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_small' ); ?> } }
          ]
        });
      });

      </script>

    </ul>

  <?php endif; ?>

  <?php wp_reset_query(); ?>

<?php endif; ?>

Changes suggested by @Prasant were already added in the code above.

3] Save the file named as _post-carousel.php
4] Upload this file to your server in the child theme’s folder /wp-content/themes/x-child/framework/legacy/cranium/headers/views/ethos/
5.] Go to X > Theme Options > Ethos > Post Carousel and select “Random” to display the product items.

You will need to create the folder path since it does not exist yet in your child theme.

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

Would that be theme functions of my website in edit theme?

Hello Mickey,

Please follow those steps to be able to accomplish what you want.
You’ll have to create the file, add the code as indicated above, login to your FTP and upload it it your child theme folder.

Hope this make sense.

It’s not making since, I’ve created and saved the code but I don’t know how to get to the FTP, this is all new to me, I couldn’t even tell you what ftp means sadly. I’m going to trying doing a search though & see if I can figure it out

Hi Mickey,

If you have access to your hosting, you can use the file manager from your hosting panel. You can also find and create the FTP username and password in the hosting panel as well. If you need with FTP and other hosting stuff, it is best that you contact your hosting provider.

When everything else fails, please provide us your FTP details in a secure note so that we can resolve this issue for you. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

Hi There,

I’ve created that file for you. The products are displaying the post carousel now.

Cheers!

Thank you Thai, but how did you do it? Sorry to be such a pain but it’s something I really want to learn how to do. Thank you again!

Hello Mickey,

@Thai has simply followed the steps I’ve given. He created a file in his local computer, inserted the given code, saved the file as _post-carousel.php. He has logged in to your FTP since you already provided it and then he uploaded the file to your child theme’s folder /wp-content/themes/x-child/framework/legacy/cranium/headers/views/ethos/.

Hope this sums it up.

Thank you, guess that is something I will have to learn how to do

You’re welcome. I’d recommend that you review the best practices customization practices at https://theme.co/apex/forum/t/customizations-best-practices/205

Thanks.

Just read over and bookmarket that page, thank you @christian_y

Glad we could help.

Cheers!

I just noticed products are not showing up on my shop page now?

Hello Mickey,

Thanks for updating the thread.

Although related with WooCommerce but the latest issue you are facing is different. To avoid any confusion and late response time I request you to please create a new ticket and give a reference to this ticket for faster response time.

Thanks for understanding.

umm ok will do

Thank you!