Have a fairly default install of WordPress and WooCommerce on a client's site. I am looking to move the default product information on top of the product image and have it show on hover. I have made a fairly basic outline of how it should work below.
A current link to the page in question is: https://captaincutz.com/store/
The basic code base from the backend looks something like this, before CSS
<li <?php function_exists('wc_product_class') ? wc_product_class( $class, $product ) : post_class($class); ?>>
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<div class="item-inner">
<div class="product--thumbnail item--image">
<div class="item--image-holder">
<?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?><div class="item--overlay"></div>
</div>
<div class="product--action">
<?php
do_action('oasis_shop_loop_item_action');
?>
</div>
</div>
<div class="product--info">
<?php
do_action( 'woocommerce_shop_loop_item_title' );
do_action( 'woocommerce_after_shop_loop_item_title' );
?>
<div class="product">
<?php
do_action('oasis_shop_loop_item_action');
?>
</div>
</div>
<?php
do_action( 'woocommerce_after_shop_loop_item' );
?>
</div>
</li>
I've tried some basic code edits, as well as absolute positioning the items, which works; but it does not achieve the desired look
Related
Currently trying to change the html structure of the checkout page in woocommerce. I was looking for the template file, so I could add a title here and there. Some re-ordering of the input fields, like e-mail address at the top. But I can't find the template or way how to do it.
I did find the checkout form php file, but that is not what I was looking for. The code of the file:
<?php
/**
* Checkout Form
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.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.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
do_action( 'woocommerce_before_checkout_form', $checkout );
// If checkout registration is disabled and not logged in, the user cannot checkout.
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
echo esc_html( apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) ) );
return;
}
?>
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<div class="col2-set" id="customer_details">
<div class="col-1">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
</div>
<div class="col-2">
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
<h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</form>
<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
So the result I want is to re-order the input fields (e-mail at top for example), adding some text here and there and it would be amazing to add some custom classes.
The only thing I found online is to add some filters/hooks into the functions.php. But it feels a little bit hacky to do that.
Edit / additional info:
Sorry if my question wasn't clear. I'm trying to achieve this layout:
<div class="column">
<h2 class="title">Billing Details</h2>
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<h2> CONTACT INFO </h2>
<div class="field">
<label class="label">First Name</label>
<div class="control">
<input class="input" type="text" placeholder="First Name">
</div>
</div>
<h2> SHIPPING INFO </h2>
etc......
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<?php endif; ?>
</div>
As you can see I want to re-order the field, but also adding some html tags in it for titles or additional texts. That's why I'm looking for changing the HTML structure/template, instead of the array order of the fields.
I am using a Wordpress template made with Cherry Framework. The complete footer only appears on the home page. I would like it to appear on all page types, which are mostly 'fullwidth page templates'.
When I look at the PHP files for each template, the difference I can see is this:
<?php do_action( 'cherry_after_home_page_content' ); ?>
I can't seem to find where cherry_after_home_page_content is defined. Could this be what I'm looking for? I tried copying that into the fullwidth page template, but it doesn't work. If I'm totally off base, what would be the correct way to accomplish this?
Footer that appears on every page regardless of template type. Here is the screenshot:
Code from fullwidth page template:
<?php
/**
* Template Name: Fullwidth Page
*/
get_header(); ?>
<div class="motopress-wrapper content-holder clearfix">
<div class="container">
<div class="row">
<div class="<?php echo cherry_get_layout_class( 'full_width_content' ); ?>" data-motopress-wrapper-file="page-fullwidth.php" data-motopress-wrapper-type="content">
<div class="row">
<div class="<?php echo cherry_get_layout_class( 'full_width_content' ); ?>" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
<?php get_template_part("static/static-title"); ?>
</div>
</div>
<div id="content" class="row">
<div class="<?php echo cherry_get_layout_class( 'full_width_content' ); ?>" data-motopress-type="loop" data-motopress-loop-file="loop/loop-page.php">
<?php get_template_part("loop/loop-page"); ?>
</div>
</div>
</div>
<?php do_action( 'cherry_after_home_page_content' ); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Complete footer that only appears on the home page. Below is a screenshot:
Code from homepage template:
<?php
/**
* Template Name: Home Page
*/
get_header(); ?>
<div class="motopress-wrapper content-holder clearfix">
<div class="container">
<div class="row">
<?php do_action( 'cherry_before_home_page_content' ); ?>
<div class="<?php echo apply_filters( 'cherry_home_layout', 'span12' ); ?>" data-motopress-wrapper-file="page-home.php" data-motopress-wrapper-type="content">
<div class="row">
<div class="<?php echo apply_filters( 'cherry_home_layout', 'span12' ); ?>" data-motopress-type="static" data-motopress-static-file="static/static-slider.php">
<?php get_template_part("static/static-slider"); ?>
</div>
</div>
<div class="row">
<div class="<?php echo apply_filters( 'cherry_home_layout', 'span12' ); ?>" data-motopress-type="loop" data-motopress-loop-file="loop/loop-page.php">
<?php get_template_part("loop/loop-page"); ?>
</div>
</div>
</div>
<?php do_action( 'cherry_after_home_page_content' ); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
I figured this out, so just for anyone who comes across this with the same problem.
The "cherry_after_home_page_content" had nothing to do with it. (And actually I noticed afterward that in my pasted code above I accidentally put in the code where I had pasted it in to the fullwidth page template where it does not belong. Ooops!)
Anyway, it is just in the CSS. If you are seeing that the footer widgets only appear on your homepage, you probably have this in your CSS:
.home .footer .footer-widgets { display:block; }
In your child theme, paste in the above code but change .home to the pages where you want it to show up. For me it was .page for all regular pages, .blog and .single-post for the blog.
Hope that helps someone!
I set up WordPress with the WooCommerce Plugin and the products get looped out...all good till there.
I wanted to add the possibility that visitors are able to upvote a product. So I was looking for a plugin and found one.
But that's the actual problem! The plugin called "Like-Photo" offers me the WordPress shortcode function. If I insert the shortcode in the WordPress editor (before and after the image) all is working fine.
But I need to put that code in the PHP file (the one that loops out the products) itself.
So I tried using the PHP echo function for the shortcode as you can see below. It's not working at all. When I open up the inspector tools in my browser I only see the second shortcode part rendered out in text and it's supposed to create a div (what it does, when I paste in the shortcodes inside the WordPress post editor).
How can I fix this?
<?php echo do_shortcode('[add_voting]'); ?> <!-- shortcode beginning-->
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <!-- The loop for the items-->
<div class="image-box">
<div class="voteup_layer">
<div class="voteup_layer_triangle">
<div class="voteup_layer_triangle-inner"></div>
</div>
<p>CLICK 2 UPVOTE</p>
</div>
<div class="sb_title"><?php the_title(); ?></div>
<div class="arrow-up"></div>
<div id="num-id" class="count-num">20.453</div>
<a href="<?php the_permalink(); ?>">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
if ( has_post_thumbnail() ) {
//echo get_the_post_thumbnail( get_the_ID(), array(370,370) );
echo get_the_post_thumbnail( get_the_ID(), 'home-small-box' );
}
?>
</a>
</div>
<?php echo do_shortcode('[/add_voting]'); ?> <!-- shortcode end-->
I'm getting this HTML output:
<div class="home_small_box ">
<div class="image-box">
<div class="voteup_layer">
<div class="voteup_layer_triangle">
<div class="voteup_layer_triangle-inner"></div>
</div>
<p>CLICK 2 UPVOTE</p>
</div>
<div class="sb_title">FOSSIL <br> <span class="thin">Moon Explorer</span></div>
<div class="arrow-up"></div>
<div id="num-id" class="count-num">20.453</div>
<a href="http://online.com/product/fossil-moon-explorer/">
<img width="360" height="360" src="http://online.com/wp-content/uploads/2015/08/shopping-1-360x360.jpg" class="attachment-home-small-box wp-post-image" alt="shopping-1">
</a>
</div>
"[/add_voting]"
And want (this is how the HTML gets rendered once I add the shortcode inside the WordPress editor – it creates a div called "like-photo-wrapper" around the image where I placed the shortcode and adds the ability to vote):
<div class="like-photo-wrapper">
<a href="http://online.com/wp...2.jpg">
<img src="http://online.com/wp...300.jpg" alt="shopping-2" >
</a>
<div class="votes"><span class="currentVotes">Votes: 0</span>
vote on this image
</div>
</div>
The shortcode isn't working properly in my PHP code.
Check out the documentation for do_shortcode.
The gist of it is that the call to do_shortcode for a shortcode that wraps content should be like this
// In case there is opening and closing shortcode.
echo do_shortcode( '[iscorrect]' . $text_to_be_wrapped_in_shortcode . '[/iscorrect]' );
You can try something like this using output buffering to capture the output and pass it into your shortcode.
ob_start();
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <!-- The loop for the items-->
<div class="image-box">
<div class="voteup_layer">
<div class="voteup_layer_triangle">
<div class="voteup_layer_triangle-inner"></div>
</div>
<p>CLICK 2 UPVOTE</p>
</div>
<div class="sb_title"><?php the_title(); ?></div>
<div class="arrow-up"></div>
<div id="num-id" class="count-num">20.453</div>
<a href="<?php the_permalink(); ?>">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
if ( has_post_thumbnail() ) {
//echo get_the_post_thumbnail( get_the_ID(), array(370,370) );
echo get_the_post_thumbnail( get_the_ID(), 'home-small-box' );
}
?>
</a>
</div>
$out = ob_get_clean();
<?php echo do_shortcode('[add_voting] ' . $out . '[/add_voting]'); ?> <!-- shortcode end-->
I have different categories where the post displayed are characterized by different elements, for this reason when I use the search in wordpress the results are not shown very well.
For this reason I would like to change the appearance of the post shown in the search results based on its category.
Example:
My search.php template look like this:
<?php get_header(); ?>
<div id="content">
<div class="padder">
<?php do_action( 'bp_before_blog_search' ); ?>
<div class="page" id="blog-search" role="main">
<?php if (have_posts()) : ?>
<?php bp_dtheme_content_nav( 'nav-above' ); ?>
<?php while (have_posts()) : the_post(); ?>
<?php do_action( 'bp_before_blog_post' ); ?>
<div class="blog-post">
// Here is displayed the blog post style and features
</div><!--blog-post-->
<div class="clear"> </div>
<?php do_action( 'bp_after_blog_post' ); ?>
<?php endwhile; ?>
<?php bp_dtheme_content_nav( 'nav-below' ); ?>
<?php else : ?>
<h2 class="center"><?php _e( 'No posts found. Try a different search?', 'OneCommunity' ); ?></h2>
<?php endif; ?>
<div style="display:inline">
<center><?php wp_pagenavi(); ?></center>
</div>
</div>
<?php do_action( 'bp_after_blog_search' ); ?>
</div><!-- .padder -->
</div><!-- #content -->
<div id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-blog')) : ?><?php endif; ?>
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-ad-blog')) : ?><?php endif; ?>
</div><!--sidebar ends-->
<?php get_footer(); ?>
I tried to achieve the result of displaying based on the post category a different "template" for the post but without success.
I asked the same question on wordpress.stackexchange.com but without success, and there I pointed out a non working solution, hope it can help you in developing the code I need.
https://wordpress.stackexchange.com/questions/141856/different-layout-on-search-page-depending-on-category-post
Thank you very much for any help you will give, and excuse me for my english.
If I understand your question correctly, you could simply use the post_class() function:
<div <?php post_class( 'blog-post' );?> >
// Here is displayed the blog post style and features
</div><!--blog-post-->
This will render like:
<div class="post-3654 post type-post status-publish format-standard hentry category-buildings blog-post">
// Here is displayed the blog post style and features
</div><!--blog-post-->
for posts in the buildings category.
Then your CSS will take care of the rest:
.post.category-buildings {
border: 3px solid red;
}
But I think your setup/idea is only suitable for single category posts.
Ref: From the Codex:
The post_class may include one or more of the following values for the
class attribute, dependent upon the pageview.
.post-id
.post
.attachment
.sticky
.hentry (hAtom microformat pages)
.category-ID
.category-name
.tag-name
.format-name
I am trying to get the jigoshop to put everything in my main container and it appears to be not working.
My template is below:
<?php get_header(); ?>
<div id="productsidebar"><?php get_sidebar('products'); ?></div>
<div id="contentwrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
</div><!-- #content -->
<?php get_footer(); ?>
And i have this in my functions file as per Jigoshops themeing (http://forum.jigoshop.com/kb/customize-jigoshop/wrap-your-themes-content-for-jigoshop)
function mytheme_open_jigoshop_content_wrappers()
{
echo '<div id="productsidebar"></div><div id="contentwrap">';
}
function mytheme_close_jigoshop_content_wrappers()
{
echo '</div>';
}
function mytheme_prepare_jigoshop_wrappers()
{
remove_action( 'jigoshop_before_main_content', 'jigoshop_output_content_wrapper', 10 );
remove_action( 'jigoshop_after_main_content', 'jigoshop_output_content_wrapper_end', 10);
add_action( 'jigoshop_before_main_content', 'mytheme_open_jigoshop_content_wrappers', 10 );
add_action( 'jigoshop_after_main_content', 'mytheme_close_jigoshop_content_wrappers', 10 );
}
add_action( 'wp_head', 'mytheme_prepare_jigoshop_wrappers' );
It was obviously erroring when i put the sidebar function in the functions file.
Can anyone advise how best to do this?
Site is http://upholstery180degree.co.uk/NewSite/
thanks
After analyzing the code your function is putting the product page in the main container as specified.
<div id="contentwrap">
<ul class="products">
<li class="product first">
Although from what it seems like you are using a different template for your shop page in which is causing it to show the widgets from you site. Your code is working properly, I would go into your product page and change the type of template it is using and have it the same as your other pages. Also you would not need the sidebar div information as it is not part of the main wrapper.
function mytheme_open_jigoshop_content_wrappers()
{
echo '<div id="contentwrap">';
}
function mytheme_close_jigoshop_content_wrappers()
{
echo '</div>';
}