I'm developing a wordpress theme and for some reason, my woocommerce single-product is broken. It displays everything it's suppose too but it looks like css and javascript aren't working.
I already added woocommerce support in my function files.
If I change to twentyfourteen theme, then single-product is working normally.
Can somebody help me out?
Here's the link for the single product page:
Link
WooCommerce classes are not loading on your web page. If you already added WooCommerce theme support, then you might missing WordPress body function.
Make sure you have following line in functions.php
add_theme_support( 'woocommerce' );
Also include WordPress's body function, <body> tag must be like below.
<body <?php body_class() ?>>
If you already have any class for body, pass that class to this function like
<body <?php body_class( 'existing-class' ) ?>>
To enable WooCommerce gallery features in your theme you must declare support using add_theme_support() like so;
add_action( 'after_setup_theme', 'yourtheme_setup' );
function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
More Info here
Related
I am using WordPress and I installed the Woocommerce plugin.
I added the template folder in my theme and started to customize my theme.
Now, I have to remove the Woocommerce.css from my theme and I found code on the official website here
I added the same code in the function.php
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
or
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
but both answers are not working. I have installed the 5.7.1 Woocommerce.
How can I solve this issue?
function.php
function customtheme_scripts() {
wp_enqueue_style( 'customtheme-style', get_stylesheet_uri(), array(), time() );
wp_style_add_data( 'customtheme-style', 'rtl', 'replace' );
wp_enqueue_script( 'customtheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
wp_dequeue_style( 'customtheme-woocommerce-style' );
}
add_action( 'wp_enqueue_scripts', 'customtheme_scripts' );
view source
The domain name is just an example.
This answer has been fully tested on woocommerce 5.x+ and works fine on the default woo style sheets! If you're using a custom theme and/or custom style sheet then you may encounter some discrepancies.
What you see on the documentation page, no longer works on woo 4+, according to their github page.
So you need to dequeue its styles!
wp_dequeue_styleDocs
So if you only want to remove woocommerce.css file, then you could do this:
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('woocommerce-general'); // This is "woocommerce.css" file
}
However, if you want to remove all of the style sheets loaded by woo, then you could use this:
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('wc-block-vendors-style');
wp_dequeue_style('wc-block-style');
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
}
If you still can see the styles, then try to clean your cache.
UPDATE related to the question "custom style sheet"
At the time that I was writing the answer you had not provided any screenshot of your style sheet, nor did you say anything about using a custom style sheet. That's why you were not able to get it to work.
Please do NOT copy/paste if you're using a custom style sheet, like the custom css file used in the question. wp_dequeue_style function takes your style sheet handle as the argument. So please read the documentation first. You're using a custom handle name (i.e "customtheme-woocommerce-style"), therefore, you need to use that handle name.
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('customtheme-woocommerce-style'); // This is your "custom style sheet" file.
}
Also note that commenting out the enqueue section in the main file (i.e inc/woocommerce.php) may work temporarily but on the next woo update, it'll come back again. So, it's recommended to avoid updating your template files as much as possible unless you really have to which is not the case here!
Within WooCommerce I have been making some edits to templates. So far this has been straight forward.
Now I am trying to add some columns into the 'Order Details' table under 'my-account > view-order'.
I am in the template view-order.php which is a template under 'myaccount' in WooCommerce.
Instead of seeing some code in a template to edit, I am seeing the following code:
<?php do_action( 'woocommerce_view_order', $order_id ); ?>
Where is the code from this action called and can I edit it?
Thanks for all time and help.
You need to look at WooCommerce plugin includes/wc-template-hooks.php core file (line 259):
add_action( 'woocommerce_view_order', 'woocommerce_order_details_table', 10 );
As you can see, the function woocommerce_order_details_table() is hooked in. So now let's find this function that is located in includes/wc-template-functions.php core file (starting line 2584).
As you will see this hooked function call the template file order/order-details.php.
So now you can make some changes:
1). Overriding the template file order/order-details.php via your active child theme or theme as explained in this documentation.
Note: The template file order/order-details.php is also used in Order received (thankyou), so take care to target your changes using the following condition:
// For view order
if ( is_wc_endpoint_url( 'view-order' ) ) {
// Here your changes
}
// For other cases
else {
// Here keep the original code
}
2). Or/and you could also remove this hooked function to replace it by your own custom function, with something like:
remove_action( 'woocommerce_view_order', 'woocommerce_order_details_table', 10 );
add_action( 'woocommerce_view_order', 'custom_order_details_table', 10 );
function custom_order_details_table( $order_id ) {
if ( ! $order_id ) {
return;
}
// Here below add your own custom code
}
You can also call your own custom template in that custom function, that will be used exclusively in order view endpoint...
Related: WooCommerce action hooks and overriding templates
WooCommerce Documentations:
Template structure & Overriding templates via a theme
WooCommerce Conditional Tags
I am trying to provide my custom variable.php page to woocommerce, but I don't see any changes on the page when I update the file.
I had no issues with other template files.
I have the template file on the path theme/woocommerce/single-product/add-to-cart/variable.php, and woocommerce support is turned on:
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
Is this a bug, or am I missing something?
I am using a simple theme in WordPress, that pulls it's customizers sections from the plugin ThemeHunk Customizer.
I want to hide certain sections in the customizer section, but when using $wp_customize, it isn't working.
This is what I am trying to hide:
$wp_customize->add_section('section_home_ordering', array(
'title' => __('Section Ordering', 'featuredlite'),
'priority' => 3,
));
This is located in the /wp-content/plugins/themehunk-customizer/featuredlite/customizer/customizer.php file.
I have added this to my functions.php file in my child theme directory:
function customize_register_init( $wp_customize ){
$wp_customize->remove_section('section_default_home');
$wp_customize->remove_section('pro_button');
$wp_customize->remove_section('Docs_button');
$wp_customize->remove_section('section_home_ordering'); - THIS IS THE SECTION I would like removed from the /plugin/ file
}
add_action( 'customize_register', 'customize_register_init', 99 );
It doesn't seem to remove though, like it would if you were removing a section from a parent theme.
Is there another method to do this, or is this not possible to remove from a plugin rather than a parent theme?
Thank you in advance.
SOLVED I use the customize_controls_enqueue_scripts hook to input custom CSS within the wordpress customizer, so I can display certain elements as hidden!
In theme your code works fine. Maybe it depends on action hooks order.
Have you tried?
add_action( 'plugins_loaded', 'customize_register_init', 99 );
You can simply go with these documentation as it shows you can disable particular section of Home Page (FrontPage). You can change order of appearance also from the Appearance > Frontpage Section > Section Ordering.
Reference Link: https://themehunk.com/docs/shopline-theme/#frontpage-section
https://themehunk.com/product/shopline-free-shopping-theme/
Added the line of code in my function.php file
add_theme_support('post-thumbnails');
After going saving, and looking at my screen options, Featured images still wasn't showing. I even went as far back to check if my Custom Fields was correct and I had it unmarked to show
First: (I assume it's a typo in your description): Change function.phpto functions.php
Second: Try to call add_theme_support('post-thumbnails') within a function attached to the after_setup_theme hook as shown in the documentation.
// Register Theme Features
function custom_theme_features() {
// Add theme support for Featured Images
add_theme_support( 'post-thumbnails' );
}
// Hook into the 'after_setup_theme' action
add_action( 'after_setup_theme', 'custom_theme_features' );
I hope these steps will fix your issue, otherwise it would be necessary to provide more of your code
hi #EliCollins Use this code. It should work
add_action( 'after_setup_theme', 'theme_setup' );
function theme_setup() {
add_theme_support('post-thumbnails' );
}
I actually found out the answer just last night. In the CPT UI on the left hand side there is a settings area "Click headings to reveal available options.", click on the settings caret and at the bottom under supports select Featured Images. And then of course going into your function.php and adding
add_theme_support('post-thumbnails' );