wordpress - custom homepage with products in carousel - php

I'm using WooCommerce to build a webshop.
I made a custom homepage. On this homepage, I want to display the products per category in a carousel like structure(3 per view). But how do I get the data(products per category) into my own custom homepage? To be clear, this homepage comes before the product overview(or: 'archive-product.php').
Thanks!

Modified slightly from source: https://wordpress.stackexchange.com/a/67266/16086
You'll want to use something like this:
<ul class="products">
<?php
// Change product_cat to the slug of the category you want
$args = array( 'post_type' => 'product', 'posts_per_page' => 1, 'product_cat' => 'shoes', 'orderby' => 'rand' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<h2>Shoes</h2>
<li class="product">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>
<h3><?php the_title(); ?></h3>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul><!--/.products-->
You can just change the product_cat item to the category you want and set posts_per_page to 3.

Related

Woocommerce - Get the best selling category (taxonomy)

I am in need of a function that prints out categories from top to bottom with best selling to worst selling. I've only managed to get this to work with products. Can someone assist me in how to do so or maybe already have that function stored somewhere? Thanks in advance :)
The products are a subscription btw. Don't know if that matters.
Here's the frontend part (which is hardcoded) to give an example of final results that I'm going for:
This is the code for single best selling item. If we can modify this to get the best selling products then that would be awesome!
<?php
$args = array(
'post_type' => 'product',
'meta_key' => 'total_sales',
'orderby' => 'meta_value_num',
'posts_per_page' => 1,
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
global $product; ?>
<div>
<a href="<?php the_permalink(); ?>" id="id-<?php the_id(); ?>" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail( $loop->post->ID ))
echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');
else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="product placeholder Image" width="65px" height="115px" />'; ?>
<h3><?php the_title(); ?></h3>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

Woocommerce how to show custom attributes other than default in home page?

After a long and recursive search on the web, I didn't find a solution for my needs.
I need to display, in home page, not only product name and price, but also some custom attribute I already have set in all my products. Let's say 'year' and 'author'.
All snippets found are single product or shop page related only, nothing for home page (or any other page anyway).
Tried also with woocommerce shortcodes, but they are not applicable for that purpose.
I already use:
[recent_products per_page="6" columns="6" orderby="year" order="desc"]
to display recent products ordered by "year" att (I found a snippet to add 'orderby' custom att).
Any help will be really appreciated.
Here's the code that you can use for displaying products from a specific category with meta data on the home page:
<ul class="products">
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => 'categoryNAme', 'orderby' => 'rand' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<li class="product">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>
<h3>Title: <?php the_title(); ?></h3>
<h3>Content: <?php the_content(); ?></h3>
<h3>Date: <?php the_date(); ?></h3>
<h3>Author: <?php the_author(); ?></h3>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul><!--/.products-->

Unable to change add to cart button using AJAX

I am calling product list on click of category button
as follow :
$id = $_GET['ServiceId'];
?>
<ul class="products">
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => $id, 'orderby' => 'rand' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div>
<li class="food_menu">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" />'; ?>
<div class="heading_food">
<h3 class="food_head"><?php the_title(); ?></h3>
<p class="food_head1">Description 1</p>
<p class="food_head1">Description 2</p>
</div>
<div class="price"><?php echo $product->get_price_html(); ?></div>
<div class="qty1" style="width:100%;margin-top:60px">
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</div>
</li>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
It shows me the list of product of that category, It shows a Add to cart button, I want is that if anyone click on this button then it should cahnge to added to cart and add to cart button should be disabled. How can I do this ?
Try this code.I hope, Its will help you..
HTML:
<input type="submit" value="Add to cart" class="add_cart">
Script:
jQuery('.add_cart').on('click', function () {
jQuery(this).prop('disabled', true); // for disabled button
jQuery(this).val('Added to cart'); // for change button as Added to cart
}
Thank You!!

Woocommerce sub categories

I am making a custom loop for my site using Woocommerce, I am using sub categories as a additional text field for the products but I can't find a function to just show sub categories, all are showing main and sub categories.
Can anyone help ?
<?php echo $product->get_categories(); ?>
Much appreciated :)
Here is the full code
<ul class="row-fluid">
<?php
$args = array ( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 4, 'product_cat' => 'news', 'orderby' => 'date','order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<li class="span">
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?>
<h3><?php the_title(); ?></h3>
<?php echo $product->get_categories(); ?>
<p class="price"><?php echo $product->get_price_html();?></p>
<a class="button add_to_cart_button product_type_simple"href="<?php the_permalink(); ?>">More...</a>
</a>
<div class="wer"><?php the_excerpt(); ?></div>
<span class="Cart"><?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?></span>
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>

I need to add custom query and add to cart button dynamic code in woocommerce?

I was make custom template for my WordPress site. So I need to show my product in my custom template dynamically. How can i do that?
This is my html code-->
<div class="all_content_shop">
<div class="col-md-3 single_all_c_s">
<div class="shop_product_inner">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<img src="http://jetsetbabies.com/wp-content/uploads/2006/07/100Juice_Organic_Apple_MAIN_v2.jpg" alt="Prduct Image" />
<div class="shop_product_inner_caption">
<h2>Product Title</h2>
<p>$200</p>
Add to Cart
</div>
</a>
</div>
</div>
</div>
================================================
Also i was make simple query but i did not found add to cart button dynamic code???
This is my query code---->
<div class="all_content_shop">
<?php $new_posts = new WP_Query(array(
'post_type' => 'product', //post of page of my post type
'cat' => 0, // category id, 0 for all categories.
'posts_per_page' => 12,
'offset' => 0, //how many posts you want to eliminate from the query
'orderby' => '', // order by title or date ?
'order' => 'DESC') // order as ASC or DESC
); ?>
<?php if ($new_posts->have_posts()) :
while ($new_posts->have_posts()) :
$new_posts->the_post(); ?>
<div class="col-md-3 single_all_c_s">
<div class="shop_product_inner">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_single'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" />'; ?>
<div class="shop_product_inner_caption">
<h2><?php the_title(); ?></h2>
<p><?php if ( ! defined( 'ABSPATH' ) ) exit; global $post, $product; ?> <?php echo $product->get_price_html(); ?></p>
Add to Cart
</div>
</a>
</div>
</div>
<?php endwhile;//Possibility to add else statement ?>
<?php wp_reset_postdata(); ?>
<?php else:?>
<p class="not_found">Sorry, The post you are looking is unavailable!</p>
<?php endif; wp_reset_query(); ?>
</div>
So my question is--->
My query is right or wrong?? if my query is wrong, please give me right query... Also if my query is almost right so please give me just "Add to cart" (http://prntscr.com/439lxj) button dynamic Ajax code...
Please help me...
Please help me...
Thanks !!!
I have made the necessary changes for the code to work. Make sure woocommerce add-to-cart.js or add-to-cart.min.js is enqueued in the page.
<div class="all_content_shop">
<?php wc_print_notices(); ?>
<?php $new_posts = new WP_Query( array(
'post_type' => 'product', //post of page of my post type
'cat' => 0, // category id, 0 for all categories.
'posts_per_page' => 12,
'offset' => 0, //how many posts you want to eliminate from the query
'orderby' => '', // order by title or date ?
'order' => 'DESC'
) // order as ASC or DESC
); ?>
<?php if ( $new_posts->have_posts() ) :
while ( $new_posts->have_posts() ) :
$new_posts->the_post();
global $product;
$product = get_product( get_the_ID() ); //set the global product object?>
<div class="col-md-3 single_all_c_s">
<div class="shop_product_inner">
<a href="<?php the_permalink() ?>">
<?php if ( has_post_thumbnail( get_the_ID() ) ) {
echo get_the_post_thumbnail( get_the_ID(), 'shop_single' );
} else {
echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" />';
} ?>
<div class="shop_product_inner_caption">
<h2><?php the_title(); ?></h2>
<p><?php echo $product->get_price_html(); ?></p>
<?php woocommerce_template_loop_add_to_cart(); //ouptput the woocommerce loop add to cart button ?>
</div>
</a>
</div>
</div>
<?php endwhile;//Possibility to add else statement ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p class="not_found">Sorry, The post you are looking is unavailable!</p>
<?php endif;
wp_reset_query(); ?>

Categories