I need to place something right after this element exactly:
<ol class="flex-control-nav flex-control-thumbs"></ol>
It's standard Woocommerce product gallery carousel on single product page, under main thumbnail. I was trying to find this is product-image.php and product-thumbnails.php but it's not there, I tried in different places. I need to add custom action under it.
Related
I want to replace src="image_url" to style="background: url('image_url')" of product image in shop page.
How should i do this?
Depending on what you are more comfortable, you have 2 possible ways:
in your theme create a folder structure of woocommerce\single-product\, copy inside it the file you can find at \wp-content\plugins\woocommerce\templates\single-product\product-image.php and edit the HTML;
in your theme functions.php add a filter on the woocommerce_single_product_image_thumbnail_html hook and replace the HTML passed by (maybe using some regex)
1) I'm trying to remove the breacrumb from page-title div using php instead of display:none but i can't manage to found the good hook, i check in many different php files etc but anyway i'm not good enough in PHP. I'm like zero.
2) I also want to display the breadcrumb into the footer. I manage to found a way to add it into the footer already using simply
add_action( 'flatsome_footer', 'flatsome_breadcrumb', 10 );
But i did not found the hook to put it into their "footer-1" that is a child div of the footer block. This flatsome_footer is the parent div and it will make me add more css for it.
Here is the documentation of the flatsome theme (Actions & Filters), it may can help (i try many different as i say & open php files but cant manage to remove it by remove_action maybe i have to add filters idk... i'm just bad.
https://docs.uxthemes.com/article/385-hooks#flatsome_footer
All i know is that their page title block is using (shop-page-title category-page-title page-title) css class.
Thank you very much for helping.
If you want remove breadcrumb from shop or product page, you should findout hook from below files and comment that code.
Category Page File: yourthemepath/woocommerce/layouts/headers/category-title.php
Please check https://docs.uxthemes.com/article/385-hooks#flatsome_category_title
Product Page: https://docs.uxthemes.com/article/385-hooks#flatsome_product_title
I am a c# developer but I have a website for my family business that has been developed using PHP, woocommerce and wordpress about 5 years ago by a developer that I can't connect with him anymore. the problem is as following:- I did an update to the woocomerce plugin so I can use quick books when I did that the update the category page (which I know for a fact that he did custom build it ) lost the text under the images, I did inspect the elements in the browser, the text is their but there is a lot of space that why it is hidden , i don't know why this happened after the update but anyways, when I checked the page tab in the wordpress I did find this line of code
<pre class="brush: php; gutter: false">[product_categories per_page="12" columns="3" orderby="date" order="asc"]</pre>
As I said I don't know much of PHP but I expect "product_categories" is a function located in some file
also when I checked the inspect tab in the browser I found that the text and the image of the category is inheriting form class "product-category" "product" "first"
this is the line of the html of one of the categories just to have a better idea
<li class="product-category product first">
<a href="https://www.WebsiteName.ca/product-category/backdrops/">
<img src="https://www.WebsiteName.ca/wp-content/uploads/2017/02/backdrops- 300x300.jpg" alt="Backdrops" srcset="https://www.mosaiceventrentals.ca/wp- content/uploads/2017/02/backdrops-300x300.jpg 300w, https://www.WebsiteName.ca /wp-content/uploads/2017/02/backdrops-150x150.jpg 150w, https://www.WebsiteName.ca/wp-content/uploads/2017/02/backdrops-180x180.jpg 180w" sizes="(max-width: 300px) 100vw, 300px" width="300" height="300">
<h2 class="woocommerce-loop-category__title">
Backdrops
<mark class="count">(10)</mark>
</h2>
</a></li>
-I did try to download all the files from the server and search in each file for this function but no luck
I checked the bootstrap file for for the function "product-category" "product" "first" but I didn't find these classes
Basically I want to remove all extra space so the title can appear under the image but I want to know how to locate the file it is coded in
so after searching for a while I started to think out side of the box and discovered that the their was a line spacing error in the paragraph before the category list that was affecting the appearance of category titles. one other thing I found is that the new update for the woocommerce have a function to create a category list that link to the list of products under each category and the styling is much better than the custom made one.
just a reference to do that is as following:-
1- Dashboard --> Products --> Categories and you can add, edit and delete categories
2- in order to view the shop page as categories NOT the products you go to Dashboard --> Appearance --> customize --> woocommerce --> Product Catalog --> then select Show categories
3- then in order to add the welcome paragraph just go to Dashboard-->Pages--> All Pages select the shop page and click edit and just write the welcome paragraph.
thanks everyone for your help and suppourt
I have managed to get Owl Carousel working perfectly on my Magento home page using div's of images.
My aim is to get it wortking with products but I am struggling.
I want to display the products from a particular category and show them on the home page using the Owl Carousel but I usually call products on to the home page using a cms block with code such as:
{{block type="catalog/product_list" category_id="112" column_count="4" template="catalog/product/list.phtml"}}
This obvioulsy is not working - the products show but they have their own layout I think due to the template.
Does anyone have any ideas on what php or cms block I can use to call produts from a cateogry so it works with owl carousel.
Thanks in advance.
Start off with the assumption that you don't intend to load a massive amount of products into the Owl Carousel and that you're perfectly fine with creating a category just to store the products intended to be in the slider.
<div class="owl-carousel">
<?php
$categoryId = 15; // this is the category holding your products
$products = Mage::getSingleton('catalog/category')->load($categoryId) // load the category
->getProductCollection() // and the products
->addAttributeToSelect('image'); // tell Magento which attributes to get
foreach ($products as $product) { // iterate through the entire collection
echo '<div class="item"><img src='.$product->getImageUrl().'></div>'; // print the image url inside of the required Owl markup
}
?>
</div>
The above should be organized properly, as well, with the variables you'll be calling appearing at the top of your block and the foreach only appearing within the Owl portion of the block.
The foreach should go within the Owl Carousel markup, as in addition to the Magento attribute we are also printing the Owl markup.
phtml file and with the help of list.phtml file and display your product and give your own css classes. before that create a small extension and create one list.php file with in block folder of your extension and call your own block and phtml file in your cms page or static block that you have written right now
As you can see, the title, the placeholder image, the six bottles
image at the top are rendered by the single-product template. I need
it to be rendered by bto-item.php file so that I can edit the CSS, the
contents of it through the template files.
Can you give me the steps to work like that? Currently the select
options are being executed by the Composite product plugin templates.
In your currently used template create new folder named woocommerce and in it put the single product php file. And modify it by your need. :)