I want to add the woocommerce_catalog_ordering action right before my shop-header div. This will add it after my container div. Since my custom html isn't an action like woocommerce has built in, i'm not sure how to order them both.
function shop_page_header() {
get_template_part('elements/header-nav');
remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_catalog_ordering', 30 );
// Remove the result count from WooCommerce
remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_result_count', 20 );
if (is_shop()) { ?>
<div class="container">
<?php add_action( 'woocommerce_before_main_content', 'woocommerce_catalog_ordering', 20 ); ?>
<div class="shop-header">
<div class="callout">
<div class="inner">
<h4>test</h4>
<h1>test</h1>
<div class="price">$59.00 - $149.00</div>
<h4>test</h4>
Shop Now
View More
</div>
</div>
</div>
</div>
<?php }
}
add_action('woocommerce_before_main_content', 'shop_page_header');
I restructured things to be like this. I had to break everything up. If there's a better way, please share
// shop page header
function shop_page_header() {
get_template_part('elements/header-nav');
}
function shop_page_banner() {
if (is_shop()) { ?>
<div class="container">
<div class="shop-header">
<div class="callout">
<div class="inner">
<h4>test</h4>
<h1>test</h1>
<div class="price">$59.00 - $149.00</div>
<h4>test</h4>
Shop Now
View More
</div>
</div>
</div>
</div>
<?php }
}
remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_catalog_ordering', 30 );
// Remove the result count from WooCommerce
remove_action( 'woocommerce_before_shop_loop' , 'woocommerce_result_count', 20 );
add_action('woocommerce_before_main_content', 'shop_page_header', 10);
add_action( 'woocommerce_before_main_content', 'woocommerce_catalog_ordering', 20 );
add_action('woocommerce_before_main_content', 'shop_page_banner', 30);
If your theme has the right hook built in you can use the Simply Show Hooks plugin to find the right one: https://wordpress.org/plugins/simply-show-hooks/
Related
I'm trying to hide the parent element in Wordpress if the child has no tags.
Đ¢his is the code:
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
I want to hide all div #tags if php string is empty.
You can use the function has_tag() to check if there is a tags.
<?php if(has_tag()) { ?>
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
<?php } ?>
If you use html elements as the $before, $sep, and $after parameters for the_tags, you can hide #tags when there's only one child (the ).
Looking at this post: Selector for when only one child exists in parent I came up with the below example.
<style>
.tags h4:nth-child(1):last-child{
display: none;
}
</style>
<div class='tags' id='tags1'>
<h4>Some nonsense</h4>
</div>
<div class='tags' id='tags2'>
<h4>Some nonsense</h4>
<ul><li>Some</li><li>other</li></ul>
</div>
hello i've a problem about showing the slider revolution on category page on wordpress woocommerce.
So I want layout & view like this :
I want like this
i've try to add shortcode to category but the result of category not like i want, the layout like this :
not I want
can someone help me?
You can add a predefined slider at the top of a woocommerce archive page using the action woocommerce_before_main_content or woocommerce_archive_description.
In the function that will be call, use do_shortcode().
add_action('woocommerce_archive_description', 'display_revslider');
function display_revslider(){
echo do_shortcode('revslider'); //arrange this to get the right shortcode with category if need
}
Or by using the php function of the plugin
function rev_slider_to_archive_pages() {
if ( is_product_category() ) {
if (function_exists('putRevSlider')) { putRevSlider("default");
}
}
}
add_action( 'woocommerce_before_main_content', 'rev_slider_to_archive_pages',21 );
Hope it helps !
sample carousel slider code
function product_carousel_func() {
$Inc=0;
$args=array(
'post_type' =>'product',
'product_cat' =>'',
'posts_per_page' =>20,
'orderby' => 'rand'
);
$wc_query = new WP_Query($args);
$carouselSlider = '<ol class="carousel-indicators ">';
$output.='';
if ($wc_query->have_posts()){
while ($wc_query->have_posts()){
$wc_query->the_post();
global $product;
$imgurl = wp_get_attachment_image_src(get_post_thumbnail_id($product->id));
$ActiveClass='';
if($Inc==0){
$ActiveClass='active';
}
$carouselSlider .= '<li data-target="#mycarousel1" data-slide-to="'.$Inc.'" class="'.$ActiveClass.'"></li>';
if($Inc%2==0) {
$output.='<div class="item '.$ActiveClass.'">
<div class="container">
<div class="row carouselrow">';
$OddClass ='cs_oddslider';
}else{
$OddClass ='cs_evenslider';
}
$output.='<div class="col-md-6 col-sm-6 col-xs-6 '.$OddClass.'">
<img src="'.$imgurl[0].'" class="img-responsive img-circle">
<div class="carousel-caption " id="carousel">
<div class="col-md-10 col-sm-10 col-xs-10 paradiv">
<p class="">'.get_the_title().'</p>
<button type="button" class="">SHOP NOW</button>
</div>
</div>
</div>';
if($Inc%2!=0) {
$output.='</div></div></div>';
}
$Inc++;
}
}
$carouselSlider .= '</ol>';
return '<div class="container-fluid "><div id="mycarousel1" class="carousel slide" data-ride="carousel">'.$carouselSlider.'<div class="carousel-inner" role="listbox">'.$output.'</div></div> </div></div></div>';
}
add_shortcode( 'product_carousel', 'product_carousel_func');
I have this class for my menu: .site-header-menu
and I have this class for my content: .content
what should I do to catch .content when .site-header-menu is displayed?
I already tried this but it doesn't work:
.site-header-menu + .content{
opacity: 0;
}
Do you have some suggestion? This kind of things are possible using css?
I'm using Wordpress so this is my php struture in header.php. The idea is to hide the content of my page template when site-header-menu is open:
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<!--<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>-->
<button id="menu-toggle" class="menu-toggle" data-title="<?php the_title(); ?>"><?php the_title(); ?></button>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>" data-title= ''>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
How is .site-header-menu being displayed? Is a class being added to display the menu or is its display property being directly manipulated by JavaScript? There is no indication how you can tell if the menu is displayed?
.site-header-menu + .content{
opacity: 0;
}
The above rule, because of the plus sign, will only apply if the element with class content is immediately following the element with class site-header-menu in the DOM. For example:
<div class="site-header-menu">
... menu stuff ...
</div>
<div class="content">
... content stuff ...
</div>
This might be the problem, but without actually seeing the output HTML it's hard to say.
If you are using PHP or JS to toggle the visibility of the menu you could potentially add/remove an additional class to .content that will hide/show it based on the menu being displayed or not.
/* CSS rule to hide the .content element */
.content.hideMe {
visibility: none;
}
// pseudo-script click event handler (NOT REAL SCRIPT!)
function menuButtonClick() {
if (menuCurrentlyDisplayed) {
// menu is already displayed so hide it and show content
hideMenu;
removeClass(".content", "hideMe");
} else {
// menu is not yet displayed so show it and hide content
showMenu;
addClass(".content", "hideMe");
}
}
If you could post your output HTML, or set up a fiddle for us to take a look, it would be helpful.
I am trying to figure out how I can stretch my slider image to the full-page width, but have it also be responsive. I am running on Wordpress and I'm not opposed to using Javascript if necessary. Here is the site: http://cmattayers.com/b2bu/
This is my original mockup, if that helps: http://i.imgur.com/jCWPIsp.jpg
Pull the slider div at the end but inside just before last </div> of <div class="navbar-header"> it may be found in your header.php if you use a shortcode like [yourslidershortcode] in your page content you have to modify it before post into direct theme header.php put <?php echo do_shortcode( '[yourslidershortcode]' ); ?>
I found the in the site you mentioned
<div class="navbar-header">
</div><!-- end of #logo -->
<?php echo do_shortcode( '[yourslidershortcode]' ); ?>
</div>
If the slider show only on home page use below code instead of above
<div class="navbar-header">
</div><!-- end of #logo -->
<?php
if ( is_home() ) {
echo do_shortcode( '[yourslidershortcode]' );
}
?>
</div>
I'm trying to tweak a Wordpress child theme: https://github.com/schikulski/gromf which edits the parent theme Roots: http://roots.io/
How to make the below Zurb Foundation markup has-form.li as a last child in php?
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-4 small-3 columns">
Search
</div>
</div>
</li>
The existing php that I got to play with:
https://github.com/schikulski/gromf/blob/master/lib/nav.php
I'm not sure if the child/parent theme relationship would cause issues with this method, but I usually use the wp_nav_menu_objects hook.
function nav_menu_add_last_class( $items, $args ) {
$i = count($items);
while($items[$i]->menu_item_parent != 0 && $i > 0) {
$i--;
}
$items[$i]->classes[] = 'has-form';
return $items;
}
add_filter( 'wp_nav_menu_objects', 'nav_menu_add_last_class', 10, 2 );