I am working on a wordpress site that is working with the woocommerce plugin.
This is what I am having trouble with:
IN SHORT:
In the main products page, the product description is part of the anchor and is therefore clickable. I would like to limit the anchor to only the product name.
How can I achieve this?
DETAILS:
The woocommerce product page is structured as follows:
<ul class="products">
<li class=MULTIPLE_CLASSES>
<a href="LINK_TO_PRODUCT_PAGE">
<img class="" etc.....>
<h3>PRODUCT_NAME</h3>
<div itemprop="description">
<p></p>
</div>
<span class="price">
<span class="amount">COST_OF_PRODUCT</span>
</span>
</a>
<a class="button etc..."</a>
</li>
</ul>
As such, the anchor is applied to all the product's information, including the description and the price.
I don't really like this functionality and also, as such, the user can't select the text. So I would like the anchor to surround only the product name.
I guess the output I want is something like this:
<ul class="products">
<li class=MULTIPLE_CLASSES>
<a href="LINK_TO_PRODUCT_PAGE">
<img class="".....>
<h3>PRODUCT_NAME</h3>
</a>
<div itemprop="description">
<p></p>
</div>
<span class="price">
<span class="amount">COST_OF_PRODUCT</span>
</span>
<a class="button ...."</a>
</li>
</ul>
So far, I tried as follows:
Researched on the web to see how to customize woocommerce pages. What I found was to duplicate the file you want to change and put it in the child-theme/woocommerce folder. However, that applies only to the files in the templates folder, but this file seems to be not in the templates folder but rather in the includes/admin/views folder
The reason why I italicized the word 'seems' is because I changed that core file manually and replaced it, but it does not take effect! On the site, the structure is still as always! So maybe this is not the file?!
Any help will be greatly appreciated.
Thanks in advance
P.S. I know how to code in many languages, but I never got to PHP. So, if this involves PHP, I would appreciate some guidance.
Related
I have a WordPress Custom Post Type called vacancies.
On my vacancies archive page, I wish to have a list of the latest vacancies with small excerpts (which I have).
When I click the "read more" link under each vacancy, I want the content of the CPT to appear on the same page in another div. When I click another link, I then want it to change the div content to the new CPT content, without reloading the archive page.
I hope this makes sense?
<ul class="vacancies-list">
<li>
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li>
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li>
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
</ul>
<div class="vacancy-content">
<p>When "read more clicked, I want content of CPT pulled here</p>
</div>
There are two ways:
Either Add an AJAX Funtion, which dynamically loads the contents of your cpt when users click the "Read More". It basically is a way to execute a regular WP_Query statement using JavaScript. You can find plenty of goog tutorials online on how to implement such a thing based on your included libraries. Personally I tend to use jQuery and it's .ajax() function. - This method will ensure you have a quick initial load time of your page but there will be a slight delay between clicking "Read More" and the content being displayed.
Or Load the content in a hidden div and then just toggle the visiblity of said div using JS. Add a unique identifier to your list-items. This should then help you identify the post and then show the corresponding content in the Vacancy-content. Something like this to clarify:
<ul class="vacancies-list">
<li data-post="1">
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li data-post="2">
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
<li data-post="3">
<h2>Vacancy title</h2>
<p>Vacancy CPT Excerpt</p>
Read more
</li>
</ul>
<div class="vacancy-content">
<div class="content post-1">Lorem Ipsum</div>
<div class="content post-2">Lorem Ipsum</div>
<div class="content post-3">Lorem Ipsum</div>
</div>
All content in vacancy-content is hidden. On ReadMore-Click hide all content and then show the content based on the li's data-attribute.
This Method will cause a slightly higher intial load time but will display the new content immediatly
Google recognizes all my itemprops except the one for name. But I'm not doing anything different there. Do you have an idea what could be missing?
<div id="itemAll" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span id='myId' itemprop='name'>Product</span>
</div>
Try changing to double quotation marks ""
<span id="myId" itemprop="name">Product</span>
and linking product names with this schema
<a itemscope itemtype="http://schema.org/Product" href="/product/url"> Product title</a>
Or you can use Googles Microdata markup tool
https://www.google.com/webmasters/markup-helper
When I go to my shop page products are displayed in a very strange way : Product details take lot of place. I tried to understand what have changed since yesterday and I notice (inspecting element via Chrome) that the html code before was :
<ul id=product ....>
<li class=product_item ...>
<div class=image container>...</div>
<div class=clearfix>...</div>
<div class=product details>...</div>
</il>
</ul>
and now I have this following code (and it destroy my product list display) :
<ul id=product ....>
<div class=t_singleproduct_cont>
<li class=product_item ...>
<div class=image container>...</div>
</il>
</div>
<div class=clearfix>...</div>
<div class=product details>...</div>
</ul>
As you can see the product details is outside the li tag and so my shop page is such a mess.
I tried to identify where this piece of code was coming from and I found that it was inside the content-product.php file but I can't see the line with "t_singleproduct_cont" div.
If you could help to deal with this problem I'll be very grateful !
Thank you very much
#Tayfun Akaltun. Have you installed plugin called enhanced e-commerce plugin for google analytics?
I'm trying to put a link for users to subscribe to my blog using an RSS Feed.
<div id="rss_link" style="margin-left:35%; margin-right:20%; width:10em;">
<a href="http://therearenoroads.com/feed">
<img style="width:90px; height:90px;" src="http://blog.sironaconsulting.com/.a/6a00d8341c761a53ef0120a7abc384970b-120wi" alt="RSS Link" />
</div>
<p style="font-size:1.3em; text-align:center;">Feed of TANR Knowledge</p>
</a>
This is the error that appears on the link...
This XML file does not appear to have any style information associated with it. The document tree is shown below.
...then a whole bunch of code.
Any ideas where this problem could be?
That isn't so much an error as it as a note regarding how your feed will be presented. It's letting you know that your feed isn't being styled and is being output in a raw form. That isn't necessarily "bad", since it will still work as a RSS feed. It just won't be as pretty. Compare: http://news.google.com/?output=rss (a valid RSS feed with no styling) with http://feeds.bbci.co.uk/news/rss.xml?edition=int (styled RSS)
You are closing </div> inside your <a> element. You might want something like this:
<div id="rss_link" style="margin-left:35%; margin-right:20%; width:10em;">
<a href="http://therearenoroads.com/feed">
<img style="width:90px; height:90px;" src="http://blog.sironaconsulting.com/.a/6a00d8341c761a53ef0120a7abc384970b-120wi" alt="RSS Link" />
<p style="font-size:1.3em; text-align:center;">Feed of TANR Knowledge</p>
</a>
</div>
Additionally, this also happens in chrome when you click on most rss feeds, since it doesn't have a rss subscribe widget in it. In firefox, the feed is handled much more smoothly.
I don't know if i set my breadcrumbs correctly, all my pages have breadcrumb like so:
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
<div class="breadcrumb">
<a title="MY Site Title" rel="home" itemprop="breadcrumb" href="http://www.mysite.com/">MY Site Title</a>
<span class="navigation-pipe">»</span>
<a title="Category Name" itemprop="breadcrumb" href="http://www.mysite.com/CategoryName">Category Name</a>
<span class="navigation-pipe">»</span>Product Page
</div>
And if its a Product page i add this to the body after the breadcrumb.
<div itemscope itemtype="http://schema.org/Product">
With Product info HERE
</div>
You should try adding
itemprop="breadcrumb"
to the containing div, not the links themselves. As shown in the correct answer here.
You can also use Google's own structured data testing tool to test what data it is able to extract.
They also have a troubleshooting section which describes common pitfalls.
Finally, if all else fails you can ask them manually though they don't promise an individual response.