Is there a way to simplify the single.php without using all the woocommerce template part files?
I wanted to create a very simple loop for the products and apply them exactly to the layout I created. But with all the loop parts from Woocommerce, makes this task a bit difficult.
What I want is something that respects the following structure:
<div A>
[product images code]
</div>
<div B>
[product short description + buy button]
</div>
<div C>
[full description of the product]
</div>
<div D>
[related products]
</div>
Is that impossible? Does anyone knows a way to do something like this?
thanks!
Yeah, it is possible ;)
There are number of ways to do this... You can try like this...
<div A>
<?php woocommerce_show_product_images() ?>
</div>
<div B>
<?php woocommerce_template_single_excerpt() ?>
<?php woocommerce_template_single_add_to_cart() ?>
</div>
<div C>
<?php woocommerce_product_description_tab() ?>
</div>
<div D>
<?php woocommerce_output_related_products() ?>
</div>
This approach uses WooCommerce functions as much as possible so as to avoid writing any extra code 😉
Be sure to add your own css styles and make it pretty 🙂
Related
I'm using the <!--nextpage--> function to page break and split the page on Wordpress.
The problem is, whenever <!--nextpage--> is inserted, the position of sidebar is moved to where it shouldn't be.
It's like this on page.php:
<div class="main">
<?php
if (have_posts()) :
...
?>
<?php wp_link_pages(); ?>
</div>
<?php get_sidebar(); ?>
So if I understand correctly, .main and get_sidebar are on the same level.
But when I actually make some page using this template, an output is like this:
<div class="main">
<div class="section">
...
<div class="content">
// pagination is inserted here
</div>
<aside class="sidebar">
...
</aside>
</div>
</div>
In other words, get_sidebar(aside tag) automatically moves into .section.
This is extremely confusing to me, and really don't know what to do here.
Why does Wordpress decide to put it inside of .section? Why can't it be faithful to the template?
Now the sidebar is positioned at the end of content instead of being on the right side.
What are the possible causes and solution to this issue?
Thank you for reading.
I would like to remove the extra markup that is around the generated paragraph items.
<h1>
<div class="field field-name-field-title field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">Title</div>
</div>
</div>
</h1>
I would like it to display like this:
<h1>Title</h1>
I’ve not had any luck trying some of the suggestions in the Paragraphs issues https://www.drupal.org/node/2251909 such as editing the following files:
paragraphs-item.tpl.php
paragraphs-items.tpl.php
paragraphs.theme.inc
Does anyone have any experience with this module and be able to offer some assistance?
You can use strip_tags() to remove the html tags.
<h1><?php print strip_tags(render($content['YOUR_FIELD'])); ?></h1>
or
<?php print strip_tags(render($content['YOUR_FIELD']), "<h1>"); ?>
Hope this helps you.
I am using a CMS where adding page content is easy:
<div>
<?php get_page_content(); ?>
</div>
...which will spit out any and everything from the body of the CMS admin edit page.
But what about when I want to add and control smaller bits? For example, employee bio's on a company team page. http://get-simple.info/start/team/
In HTML I would do something like:
<div id="employees-bios">
<div class="employee">
<img src="employee1.jpg">
<p>Employee is a seasoned designer.</p>
</div>
<div class="employee">
<img src="employee2.jpg">
<p>Employee is a seasoned architect.</p>
</div>
</div>
Do I need to look into components? Would this be done similar to how sidebars are implemented in GetSimple CMS?
Okay, so I'm developing a site in wordpress and I have two file templates "Default Template" and "Shop" in both templates I have;
<?php include('breadcrumbs.php'); ?>
and inside the 'breadcrumbs.php' file I the following;
<div class="breadcrumbs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb">
<?php
if (function_exists('show_full_breadcrumb')) {
show_full_breadcrumb();
}
?>
</ol>
</div>
</div>
</div>
</div>
Now these breadcrumbs display properly if it is in the 'default template' like this;
But on the shop page display like this and I have no idea why as they're both including the same file;
now I'm not sure if this would affect much of it but I am also using WooCommerce.
Hopefully someone can help! thanks in advance!
It's definitely a css issue. Something is overriding the styling on that shop page. Use firebug to diagnose the breadcrumbs. Or provide a link so I can look at it. But Firebug will show you the ul styling right on the breadcrumbs and you can A/B between the default and the shop template. Should be an easy fix with the CSS
Hope this helps.
I'm a little bit of a newb when it comes to PHP, but know enough to get around and would like to know if this can be done. sample
I want to break my wordpress page into 2 columns, but also want to have the header in the 1st column.... along with other text. I don't want the header floating over both columns...
The second column will house images only...
is that possible? In my head it makes sense, but then when I try and work it out, I'm just not sure....
And I just got thinking... I have my home page static with the smooth slider on it, so that is now going to cause more grief.
Any help, advice or pointers would be greatly appreciated.
Thanks in advance
This is more CSS/HTML than PHP, however that's fine. The first thing you need to do is understand how to make a two column layout. Then you will need to have the post title in the first column, something like this:
<article>
<div id="col1">
<h1>Post Title</h1>
Lorem ipsum dolor sit amet...
</div>
<div id="col2">
<img src="" />
</div>
</article>
To make this into WordPress you will of course need to add the WordPress Tags:
<div id="col1">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
Finally, adding the image(s) on the right. It can be done easily using WordPress' built in functionality, if you only need one image: (Note you will have to add something in your theme's functions.php file as per the WordPress Docs)
<div id="col2">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
To add multiple images, it gets more complex and you'll have to start looking for a plugin to achieve that goal.