I am new to woocommerce.I have a problem in product listing,when I add the shortcode It shows woocommerce html,class listing,But I want to display my html,css I tried but it is not not working ,Here is woocommerce code..
<ul class="products">
<li class="post-22 product type-product status-publish has-post-thumbnail first shipping-taxable purchasable product-type-simple product-cat-featured instock">
<a href="http://localhost/wordpress/?product=mac-2">
<img src="http://localhost/wordpress/wp-content/uploads/2015/02/2-240x300-240x300.jpg" class="attachment-shop_catalog wp-post-image" alt="2-240x300" height="300" width="240">
<h3>Mac 2</h3>
<span class="price"><span class="amount">£50.00</span></span>
</a>
Add to cart
</li>
Here is my code ..
<div class="box-product product-carousel" id="featured-tab-carousel">
<div class="slider-item">
<div>
<div class="product-block" id="element_change">
<div class="product-block-inner">
<div class="product-image-block">
<?php echo do_shortcode('[product_category category="featured" per_page="12" columns="4" orderby="default" order="ASC"]');?>
<div class="product-hover-block">
<div class="add-to-link">
<div class="cart">
<input type="button" value="Add to Cart" onclick="addToCart('43');" class="button" />
<em>Add to Cart</em>
</div>
<div class="wishlist"><a onclick="addToWishList('43');">Add to Wish List</a>
<em>Add to Wish List</em>
</div>
<div class="compare"><a onclick="addToCompare('43');">Add to Compare</a>
<em>Add to Compare</em>
</div>
</div>
<div class="rating"><img src="<?php echo get_template_directory_uri();?>/catalog/view/theme/OPC080180/<?php echo get_template_directory_uri();?>/image/stars-0.png" alt="Based on 0 reviews." /></div> </div>
</div>
<div class="product_category_title"> - Software</div>
<div class="name">MacBook</div>
<div class="product_info">
<div class="price">$589.50 </div>
</div></div></div>
Please help me how to change css...
This is said to work as a way to include a custom CSS Stylesheet for Woocommerce:
function enqueue_style_after_wc() {
$deps = class_exists( 'WooCommerce' ) ? array( 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general' ) : array();
wp_enqueue_style( 'my-style', 'my-style.css', $deps, '1.0' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_style_after_wc' );
Source: https://wordpress.stackexchange.com/questions/135171/woocommerce-include-custom-stylesheet-after-woocommerce-styling
Related
I have 2 wordpress installations, 1 is for major content, the other is a help center.
the help center is installed in the major content directory. So you have the wordpress directory, and another in that directory, making it so we can use different themes and change the look between the two.
I'm just curious, on the search results page, I'm getting the correct url's, but they are going to 404 pages. I verified in the database that these records exist, so it's not a matter of the database not making these records and that these pages don't exist. Another note is that the search results page will return pages that have been created, but
<?php
get_header();
global $wp_query;
$total_result = $wp_query->found_posts;
?>
<div class="main">
<div class="main-hero">
<div class="container">
<h1>Boxstorm Help Center</h1>
<p>Search the Boxstorm Help Center documentation</p>
<div class="search-wrapper">
<form id="searchform" class="searchform" role="search" method="get" action="<?php echo site_url(); ?>">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input id="s" name="s" type="text" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'boxstorm' ); ?>" value="<?php echo get_search_query(); ?>">
<span class="search-button-wrapper">
<input id="searchsubmit" type="submit" value="">
<i class="fa fa-search"></i>
</span>
</div>
</form>
</div><!-- / .search-wrapper -->
</div>
</div><!-- /.main-hero -->
<nav class="main-hero-subnav cd-secondary-nav">
<div class="container">
<div class="is-hidden-mobile">
<?php get_breadcrumb(); ?>
</div>
</div>
</nav>
<div class="panel sub-nav-hero">
<div class="container page">
<div class="columns is-multiline is-mobile search-results">
<div class="column is-3-desktop is-6-tablet is-full-mobile left">
<div class="columns top-cats is-multiline is-mobile is-centered">
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/getting-started/">
<i class="fas fa-list-ul"></i>
<h2>Getting Started</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/documentation/">
<i class="fas fa-book"></i>
<h2>Documentation</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/videos/">
<i class="far fa-play-circle"></i>
<h2>Browse Videos</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/contact/">
<i class="fas fa-at"></i>
<h2>Contact Support</h2>
</a>
</div>
</div>
</div>
</div>
<div class="column is-9-desktop is-6-tablet is-full-mobile right">
<h1 class="results"><?php printf( __( 'Search results for: <b>%s</b>', 'boxstormsupport'), get_search_query() ); ?></h1>
<div class="columns is-multiline">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', 'search' ); ?>
<div class="column is-12 results">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php the_permalink(); ?>
</div>
<?php endwhile; else : ?>
<div class="column is-12">
<p><?php _e( '<p>Sorry, but there were no results for the term <b style="font-weight:900;">'.get_search_query().'</b>. Please refine your search terms and try again.</p>' ); ?></p>
</div>
<?php endif; ?>
</div><!-- / columns -->
</div><!-- / columns is-9 right -->
</div><!-- / search-results -->
</div>
</div>
</div>
<?php get_footer(); ?>
The site is live at https://www.boxstorm.com/help-center. If you'd like to see the problem.
The pages follow this format in wordpress:
Pages parameters:
This is what I'm seeing:
Chrome
Firefox
Any help would be appreciated, thanks.
First post - be gentle :)
I've run into an issue with row height in Bootstrap (I think). I'm brand new to Bootstrap and I'm trying to do some basic edits to my Wordpress site and really want to further my knowledge. Previously I had 4 items equally distributed across the page and it looked great. Well, I've added a fifth item and it's been dropped to the next row below the first four but isn't low enough on the page and blocks the content of one of the original four items.
How can I adjust the height of the offending row(s) to drop the bottom item low enough to accommodate the upper row?
Link to the actual page: HERE
Please see image and code below.
Offending item
HTML from the entire page:
<?php
/*
template name:Home Page
*/
get_header();
?>
<!-- banner starts -->
<div class="banner">
<div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-captions"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slides = get_field('slides','4');
if(is_array($slides) and count($slides)>0){
$num=0;
foreach($slides as $slides_val) {?>
<div class="item <?php if($num==0) echo "active"; ?>">
<img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">
<div class="carousel-caption">
<div class="banner-heading">
<span><?php echo $slides_val['slide_content_heading']; ?></span>
</div>
<?php echo $slides_val['slide_content']; ?>
<!-- Contact Us-->
</div>
</div>
<?php $num++; } }?>
</div>
<!-- Controls -->
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- banner ends -->
<!-- content starts -->
<div class="content">
<div class="process-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Process</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'process',
'orderby'=> 'post_date',
'order' => 'DESC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-4 col-md-4 col-lg-4">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-inner">
<div class="filler-title"><?php the_title(); ?></div>
<?php the_content(); ?>
<!-- Read More-->
</div>
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<?php include('vip.php');?>
<div class="service-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Services</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'services',
'order' => 'ASC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-3 col-md-3 col-lg-3">
<div class="process-fillers-image-section">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-category"><?php the_title(); ?> </div>
</div>
<p><?php the_excerpt(); ?> </p>
Read More
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<div class="instagram-section">
<div class="container">
<div class="row">
<div class="process-heading">
<div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>
#H2Htpe</div>
<?php echo do_shortcode('[instagram]'); ?>
</div>
</div>
</div>
</div>
<!-- content ends -->
<?php get_footer('footer'); ?>
Currently for a blog of mine I'm using HR Easy Blog WordPress theme. There I have a problem on how to remove the HR Easy Blog logo on the home page. I tried several methods but nothing worked for me.enter image description here
You need to go to your theme's header.php file and remove or comment below code:
<div class="header hidden-xs clearfix">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="logo pull-left">
<?php $logo = (get_option('hires_logo') <> '') ? get_option('hires_logo') : get_template_directory_uri().'/images/logo.png'; ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
</div>
</div>
<div class="col-lg-8">
<?php /* Home Ad #1 */
if( get_option('hires_ad_480_60_enable') == 'on'){
echo '<div class="pull-right top-ads">';
echo get_option('hires_ad_480_60_code');
echo "</div>";
} ?>
</div>
</div>
</div>
</div>
I am making a wp custom theme with bootstrap. I implemented a grid to display the latest posts. I want to display 4 items in a row for larger screens (down to 768px = col-sm-3) and then 2 items per row (col-xs-6). It kinda works but at some point the items are not displaying properly. In particular, when the screen width is between 1200 - 768 or less than 579, 1 row every 4 is broken and only displays 1 item (see images). I'm not sure where the issue is.
I read about the .cleardiv class but I don't understand where I should put it.
You can see the website here. (Please note that the top row with the 4 items is working fine as it is generated before the other 12 in a different row). Just click the "v" arrow to display the rows with the issue.
Thanks
<section class="bg-white" id="in_evidenza">
<div class="container">
<!-- this is the first row which is always visible. no issue here -->
<div class="row"> ...
</div>
<!-- second row: issue here -->
<div class="row" id="news-content">
<?php
$args = array( 'numberposts' => '12', 'category_name' => 'news', 'orderby' => 'date', 'offset' => '4' );
$recent_posts = wp_get_recent_posts( $args );
$i = 1;
foreach( $recent_posts as $recent ):
$post_img_src = "http://www.assatena.it/testbs/wordpress/wp-content/uploads/2016/03/".$i.".png";
$post_title = $recent["post_title"];
$post_id = $recent["ID"];
$post_content = get_post_field('post_content', $post_id);
$post_date = get_the_date("d/m/Y", $post_id);
if(strlen($post_title) >= 19){
$post_title_short = substr($post_title, 0, 19);
$post_title_short.="...";
}else
$post_title_short = $post_title;
$teaser = substr(strip_tags($post_content), 0, 66);
$teaser.=" . . .";
?>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6" id="col-news-all">
<div class="text-center">
<img class="img-rect" width="160" height="100" alt="" src='<?php echo $post_img_src; ?>' />
<h3><?php echo $post_title_short; ?></h3>
<p>
<?php echo $teaser; ?>
<br> <!-- open -->
<a data-toggle="modal" href="" data-target="#modal-news-<?php echo $post_id; ?>">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</a>
</p>
</div>
</div>
<div id="modal-news-<?php echo $post_id; ?>" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="modal-body">
<h2><?php echo $post_title; ?></h2>
<p class="post_date">- <?php echo $post_date; ?> -</p>
<hr class="star-primary">
<img id="news_img" class="img-responsive img-modal" alt="News img" src="<?php echo $post_img_src; ?>" />
<div class=" text-left">
<div class="my_post_content">
<p><?php echo $post_content; ?></p>
</div>
</div>
<div class="text-center"> <!-- close -->
<a data-dismiss="modal" class="btn btn-success btn-xl ">Chiudi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$i%=4;
$i++;
endforeach;
?>
</div> <!-- row -->
<div class="text-center">
<a data-toggle="modal" href="" data-target="">
<span id="news-all" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</div>
</div> <!-- container -->
</section>
images:
Before your $i++ write an if statement to place a clearfix
<?php if ($i % 4 == 0); ?>
<div class="clearfix"></div>
<?php endif; ?>
EDIT: for the mobile you can set another clearfix with $i % 2 == 0 and hide it in desktops via visible-xs
I'm trying to show the featured image or the post thumbnail in every list items < li >. Here's the code:
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>
but, it's not showing after all while on the other page shows. Please help.
Should you have get_the_post_thumbnail($row_submenu_sql->ID); and not $row_submenu_sql->ID $post->ID is not defined in that loop.
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
//UPDATE THIS LINE LIKE BELOW
<?php echo get_the_post_thumbnail($row_submenu_sql->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>