I bought Flatsome theme for woocommerce. Need to significantly reduce the product image size on this page
http://flatsome.uxthemes.com/product/bjorn-tee-ss-jack-jones/
I could achieve this by changing the following line in the "inspect element" on chrome.
"div.large-6.columns.product-gallery"
to
"div.large-2.columns.product-gallery"
But I don't understand how to change this in the source files.
I also unsuccessfully tried to change the image size in woocommerce -> settings -> Products -> Display. Regenerated Images.
I also unsuccessfully tried to change the size in Media -> Settings -> Large size & Medium Size
Would definitely appreciate the help at this time.
If you're already overriding woocommerce templates, you an change the div.large-2.columns.product-gallery value you're talking about in:
wp-content > themes > your theme > woocommerce > single-product >
product-image.php
You'll see:
<div class="large-6 columns product-gallery">
I assume that the theme is already doing that and you should be able to find the file I'm referring to. However, if the theme is not overriding the templates, you need to learn about doing so by reading the docs.
To achieve this you can simply create a custom product page with ux builder (no coding) :
Flatsome Docs
Or creating a child theme and override woocommerce templates and/or Flatsome shortcodes.
To override Woocommerce templates in Flatsome put needed files from
'flatsome/woocommerce'
to your
'child_theme/woocommerce' directory and edit them.
Depending your product page layout options, the file to edit can change. See in :
'flatsome/woocommerce/single_product/product-image-' files and override what needed.
Related
I am looking for a way (a function or a filter) to add an image to my custom theme on Wordpress. I have tried searching for ways on Google and here on SO but failed to find an answer.
All I get is "How to add an Image/Logo on my Custom Theme" but it just shows how to add a custom logo to be used on the header, footer, login page, etc. What I am trying to look for is a way to add an image to the theme itself like in Twenty Nineteen theme below.
I checked the code for the Twenty Nineteen theme to see how it was done but I can't seem to find the part where they added the code to theme image function/filter/css comment.
I am not new to creating custom themes in Wordpress. I am already familiar with using filters and creating functions to customize the theme. I know I can use the custom logo theme support in Wordpress for the image, but I just have no idea how I can use it (if it is a function or a filter). I just need help with this one. Thanks in advance! :)
Just name the image as screenshot.png [ recommended image size (currently) is 1200px wide by 900px ] and put it on theme's top-level directory (where the style.css file is )
Refarence: https://codex.wordpress.org/Theme_Development#Screenshot
I have build my own Wordpress theme and activated Woocommerce. Almost everypage works fine. But my Store and Product pages are not in Container. Also I would like to chanche the positions of sertain items on the Product Page. Theme is build in Bootstrap so I would like to use Bootstrapp to fix my Product page. The biggest problem is that I cannot find the right file to edit... Somebody got the solution?
You can check the site here.
Thanks!!
To build a WooCommerce Compatible theme, you need to edit the WooCommerce templates.
All the WooCommerce templates are located at woocommerce/templates folder. If you are not familiar with WooCommerce templates structure, you can install WooCommerce Template Hints, and it will display the template file name to show you where the content comes from.
To customize the template, please follow the best practices so your modifications will not be missing when you update WooCommerce.
I am trying to edit the layout of the shop page of my WooCommerce WordPress webshop.
Now in the WooCommerce settings I set it to disaply the categories. Now my goals is to change the <img /> tags into <div>'s. So I need to change the HTML. But I can't seem to find the template file that is used to create that page. I've looked in my theme folder and in the WooCommerce plugin folder.
Does anyone know where I can find the file or how to change the html output?
Many thanks in advance!
Check in this folder: wp-content/themes/your-theme-name/woocommerce/archive-product.php
If your theme is missing the woocommerce folder, then you can create on and past all (or only those you need to edit) template files and folders from wp-content/plugins/woocommerce/templates to the wp-content/themes/your-theme-name/woocommerce/
Also it is a good practice to use child theme when you need to edit the theme of your site so you won't loose your edits when updating it.
Hope this would help.
Considering this..
I wanna use a div with a fixed width and heigh and set a bg image so
I can set it to cover because the images are all different dimensions
Try this, maybe will work. This will wrap the image with a div. Copy and paste it on functions.php of your theme.
// Add the img wrap
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<div class=\"img-wrap\">";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "</div>";'), 12, 2);
I'm using the 3.9.3 version of Avada and the 2.5.5 version of WooCommerce.
How can I edit the fields that are in the checkout page?
I want to auto compile the email field with a saved cookie and make the email input readonly.
Is it possible? What files I need to edit?
Thanks.
You can do that in woocommerce templates (and also with some hooks).
For templates files, they are located in your woocommerce folder. You have to copy this templates directory inside your active theme (or child theme) and rename it woocommerce (if don't exist yet).
Inside the new directory woocommerce located in your active theme, go to checkout subfolder and you will find related php files, that you can edit to fit your needs.
After that if you need a specific hook, you can search in here (or post a related question, if it doesn't exist yet). Here you can fin an example of hook…
I just setup WooCommerce on my wordpress site:
http://artendijen.com/product/test-product/
I am not a fan of the template where it has the description and additional information below and in tabs, I would like the have the description and additional information to the right of the product image. Is there a setting I missed or will I have to edit it via CSS myself?
There is no setting for layout in WooCommerce. If you can do what you need to do with CSS then thats great. Otherwise, you will need to use hooks and actions in your functions.php to move things around. You can also overwrite woocommerce template files by copying them to your template with the same structure and file names you find in the WooCommerce plugin.
http://docs.woothemes.com/document/introduction-to-hooks-actions-and-filters/