Woocommerce product top category and subcategories images with ACF
I am using Woocommerce along with ACF. I needed an image to be displayed as category image for each product category.
I got that well with the code below after going through your community forum.
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
There is still one more thing I need which I cannot figure out yet. That is to have the image uploaded for a parent category to be used automatically for its subcategories - if those subcategories do not have their own image uploaded.
I am not an expert in PHP but I can follow instruction and examples if I see one. Can you please point me in a direction I can go?
Thanks
wordpress woocommerce advanced-custom-fields
add a comment |
I am using Woocommerce along with ACF. I needed an image to be displayed as category image for each product category.
I got that well with the code below after going through your community forum.
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
There is still one more thing I need which I cannot figure out yet. That is to have the image uploaded for a parent category to be used automatically for its subcategories - if those subcategories do not have their own image uploaded.
I am not an expert in PHP but I can follow instruction and examples if I see one. Can you please point me in a direction I can go?
Thanks
wordpress woocommerce advanced-custom-fields
add a comment |
I am using Woocommerce along with ACF. I needed an image to be displayed as category image for each product category.
I got that well with the code below after going through your community forum.
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
There is still one more thing I need which I cannot figure out yet. That is to have the image uploaded for a parent category to be used automatically for its subcategories - if those subcategories do not have their own image uploaded.
I am not an expert in PHP but I can follow instruction and examples if I see one. Can you please point me in a direction I can go?
Thanks
wordpress woocommerce advanced-custom-fields
I am using Woocommerce along with ACF. I needed an image to be displayed as category image for each product category.
I got that well with the code below after going through your community forum.
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
There is still one more thing I need which I cannot figure out yet. That is to have the image uploaded for a parent category to be used automatically for its subcategories - if those subcategories do not have their own image uploaded.
I am not an expert in PHP but I can follow instruction and examples if I see one. Can you please point me in a direction I can go?
Thanks
wordpress woocommerce advanced-custom-fields
wordpress woocommerce advanced-custom-fields
asked Nov 13 at 14:40
atsngr
499
499
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I think you're looking for this
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
// Image
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
if( empty( $custom_cat_title ) ) {
$parent = $queried_object->parent;
// Parent image
$custom_cat_title = get_field( 'page_header_image', $taxonomy . '_' . $parent );
}
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
This will look for the current term image. If it doesn't have an image it will look for the image from the parent term.
This worked exactly as I wanted it. Thank you!
– atsngr
Nov 14 at 15:31
What code did you think need to be added if I want the same image displayed for each product under the category?
– atsngr
Nov 15 at 10:05
Do you mean that you want to get the product image from a image setting on the category page? or do you want to use the image that you use for the first product to be displayed for all products?
– Wilco
Nov 15 at 10:32
Yes, the image setting on the category page that the product belongs to be displayed on that product page. This code for example displays header image for each product$custom_page_title = get_field('page_header_image');
but I want it to be possible that if there are no image uploaded, the product page will display the image uploaded for the category instead, like in the previous solution .
– atsngr
Nov 15 at 10:54
I was able to string some codes together and it work although I am not sure if the code is tidy.$custom_page_title = get_field('page_header_image'); if( empty( $custom_page_title ) ) { if ( is_product() ) { global $wp_query; $terms_post = get_the_terms( $post->cat_ID , 'product_cat' ); foreach ($terms_post as $term_cat) { $term_cat_parent = $term_cat->parent; $term_cat_tax = $term_cat->taxonomy; } //echo $term_cat_tax; $custom_page_title = get_field( 'page_header_image', $term_cat_tax . '_' . $term_cat_parent ); } }
– atsngr
Nov 15 at 12:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283451%2fwoocommerce-product-top-category-and-subcategories-images-with-acf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you're looking for this
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
// Image
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
if( empty( $custom_cat_title ) ) {
$parent = $queried_object->parent;
// Parent image
$custom_cat_title = get_field( 'page_header_image', $taxonomy . '_' . $parent );
}
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
This will look for the current term image. If it doesn't have an image it will look for the image from the parent term.
This worked exactly as I wanted it. Thank you!
– atsngr
Nov 14 at 15:31
What code did you think need to be added if I want the same image displayed for each product under the category?
– atsngr
Nov 15 at 10:05
Do you mean that you want to get the product image from a image setting on the category page? or do you want to use the image that you use for the first product to be displayed for all products?
– Wilco
Nov 15 at 10:32
Yes, the image setting on the category page that the product belongs to be displayed on that product page. This code for example displays header image for each product$custom_page_title = get_field('page_header_image');
but I want it to be possible that if there are no image uploaded, the product page will display the image uploaded for the category instead, like in the previous solution .
– atsngr
Nov 15 at 10:54
I was able to string some codes together and it work although I am not sure if the code is tidy.$custom_page_title = get_field('page_header_image'); if( empty( $custom_page_title ) ) { if ( is_product() ) { global $wp_query; $terms_post = get_the_terms( $post->cat_ID , 'product_cat' ); foreach ($terms_post as $term_cat) { $term_cat_parent = $term_cat->parent; $term_cat_tax = $term_cat->taxonomy; } //echo $term_cat_tax; $custom_page_title = get_field( 'page_header_image', $term_cat_tax . '_' . $term_cat_parent ); } }
– atsngr
Nov 15 at 12:19
add a comment |
I think you're looking for this
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
// Image
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
if( empty( $custom_cat_title ) ) {
$parent = $queried_object->parent;
// Parent image
$custom_cat_title = get_field( 'page_header_image', $taxonomy . '_' . $parent );
}
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
This will look for the current term image. If it doesn't have an image it will look for the image from the parent term.
This worked exactly as I wanted it. Thank you!
– atsngr
Nov 14 at 15:31
What code did you think need to be added if I want the same image displayed for each product under the category?
– atsngr
Nov 15 at 10:05
Do you mean that you want to get the product image from a image setting on the category page? or do you want to use the image that you use for the first product to be displayed for all products?
– Wilco
Nov 15 at 10:32
Yes, the image setting on the category page that the product belongs to be displayed on that product page. This code for example displays header image for each product$custom_page_title = get_field('page_header_image');
but I want it to be possible that if there are no image uploaded, the product page will display the image uploaded for the category instead, like in the previous solution .
– atsngr
Nov 15 at 10:54
I was able to string some codes together and it work although I am not sure if the code is tidy.$custom_page_title = get_field('page_header_image'); if( empty( $custom_page_title ) ) { if ( is_product() ) { global $wp_query; $terms_post = get_the_terms( $post->cat_ID , 'product_cat' ); foreach ($terms_post as $term_cat) { $term_cat_parent = $term_cat->parent; $term_cat_tax = $term_cat->taxonomy; } //echo $term_cat_tax; $custom_page_title = get_field( 'page_header_image', $term_cat_tax . '_' . $term_cat_parent ); } }
– atsngr
Nov 15 at 12:19
add a comment |
I think you're looking for this
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
// Image
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
if( empty( $custom_cat_title ) ) {
$parent = $queried_object->parent;
// Parent image
$custom_cat_title = get_field( 'page_header_image', $taxonomy . '_' . $parent );
}
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
This will look for the current term image. If it doesn't have an image it will look for the image from the parent term.
I think you're looking for this
<?php
if ( is_product_category() ) {
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
}
// Image
$custom_cat_title = get_field('page_header_image', $taxonomy . '_' . $term_id);
if( empty( $custom_cat_title ) ) {
$parent = $queried_object->parent;
// Parent image
$custom_cat_title = get_field( 'page_header_image', $taxonomy . '_' . $parent );
}
?>
<?php if ($custom_cat_title): ?>
<div class="page-title bwp-title custom-bg-cover" style="background-image:url(<?php echo $custom_cat_title; ?>);">
<div class="container" >
<div class="titlewrapper" >
<?php if(!is_single() ) : ?>
<h1>
<?php echo single_cat_title(); ?>
</h1>
<?php endif; ?>
</div><!-- .titlewrapper -->
</div><!-- .container -->
</div><!-- Page Title -->
<?php endif; ?>
This will look for the current term image. If it doesn't have an image it will look for the image from the parent term.
answered Nov 14 at 9:23
Wilco
195110
195110
This worked exactly as I wanted it. Thank you!
– atsngr
Nov 14 at 15:31
What code did you think need to be added if I want the same image displayed for each product under the category?
– atsngr
Nov 15 at 10:05
Do you mean that you want to get the product image from a image setting on the category page? or do you want to use the image that you use for the first product to be displayed for all products?
– Wilco
Nov 15 at 10:32
Yes, the image setting on the category page that the product belongs to be displayed on that product page. This code for example displays header image for each product$custom_page_title = get_field('page_header_image');
but I want it to be possible that if there are no image uploaded, the product page will display the image uploaded for the category instead, like in the previous solution .
– atsngr
Nov 15 at 10:54
I was able to string some codes together and it work although I am not sure if the code is tidy.$custom_page_title = get_field('page_header_image'); if( empty( $custom_page_title ) ) { if ( is_product() ) { global $wp_query; $terms_post = get_the_terms( $post->cat_ID , 'product_cat' ); foreach ($terms_post as $term_cat) { $term_cat_parent = $term_cat->parent; $term_cat_tax = $term_cat->taxonomy; } //echo $term_cat_tax; $custom_page_title = get_field( 'page_header_image', $term_cat_tax . '_' . $term_cat_parent ); } }
– atsngr
Nov 15 at 12:19
add a comment |
This worked exactly as I wanted it. Thank you!
– atsngr
Nov 14 at 15:31
What code did you think need to be added if I want the same image displayed for each product under the category?
– atsngr
Nov 15 at 10:05
Do you mean that you want to get the product image from a image setting on the category page? or do you want to use the image that you use for the first product to be displayed for all products?
– Wilco
Nov 15 at 10:32
Yes, the image setting on the category page that the product belongs to be displayed on that product page. This code for example displays header image for each product$custom_page_title = get_field('page_header_image');
but I want it to be possible that if there are no image uploaded, the product page will display the image uploaded for the category instead, like in the previous solution .
– atsngr
Nov 15 at 10:54
I was able to string some codes together and it work although I am not sure if the code is tidy.$custom_page_title = get_field('page_header_image'); if( empty( $custom_page_title ) ) { if ( is_product() ) { global $wp_query; $terms_post = get_the_terms( $post->cat_ID , 'product_cat' ); foreach ($terms_post as $term_cat) { $term_cat_parent = $term_cat->parent; $term_cat_tax = $term_cat->taxonomy; } //echo $term_cat_tax; $custom_page_title = get_field( 'page_header_image', $term_cat_tax . '_' . $term_cat_parent ); } }
– atsngr
Nov 15 at 12:19
This worked exactly as I wanted it. Thank you!
– atsngr
Nov 14 at 15:31
This worked exactly as I wanted it. Thank you!
– atsngr
Nov 14 at 15:31
What code did you think need to be added if I want the same image displayed for each product under the category?
– atsngr
Nov 15 at 10:05
What code did you think need to be added if I want the same image displayed for each product under the category?
– atsngr
Nov 15 at 10:05
Do you mean that you want to get the product image from a image setting on the category page? or do you want to use the image that you use for the first product to be displayed for all products?
– Wilco
Nov 15 at 10:32
Do you mean that you want to get the product image from a image setting on the category page? or do you want to use the image that you use for the first product to be displayed for all products?
– Wilco
Nov 15 at 10:32
Yes, the image setting on the category page that the product belongs to be displayed on that product page. This code for example displays header image for each product
$custom_page_title = get_field('page_header_image');
but I want it to be possible that if there are no image uploaded, the product page will display the image uploaded for the category instead, like in the previous solution .– atsngr
Nov 15 at 10:54
Yes, the image setting on the category page that the product belongs to be displayed on that product page. This code for example displays header image for each product
$custom_page_title = get_field('page_header_image');
but I want it to be possible that if there are no image uploaded, the product page will display the image uploaded for the category instead, like in the previous solution .– atsngr
Nov 15 at 10:54
I was able to string some codes together and it work although I am not sure if the code is tidy.
$custom_page_title = get_field('page_header_image'); if( empty( $custom_page_title ) ) { if ( is_product() ) { global $wp_query; $terms_post = get_the_terms( $post->cat_ID , 'product_cat' ); foreach ($terms_post as $term_cat) { $term_cat_parent = $term_cat->parent; $term_cat_tax = $term_cat->taxonomy; } //echo $term_cat_tax; $custom_page_title = get_field( 'page_header_image', $term_cat_tax . '_' . $term_cat_parent ); } }
– atsngr
Nov 15 at 12:19
I was able to string some codes together and it work although I am not sure if the code is tidy.
$custom_page_title = get_field('page_header_image'); if( empty( $custom_page_title ) ) { if ( is_product() ) { global $wp_query; $terms_post = get_the_terms( $post->cat_ID , 'product_cat' ); foreach ($terms_post as $term_cat) { $term_cat_parent = $term_cat->parent; $term_cat_tax = $term_cat->taxonomy; } //echo $term_cat_tax; $custom_page_title = get_field( 'page_header_image', $term_cat_tax . '_' . $term_cat_parent ); } }
– atsngr
Nov 15 at 12:19
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283451%2fwoocommerce-product-top-category-and-subcategories-images-with-acf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown