Support

Account

Register Login

Home › Forums › General Issues › Use ACF image field from specific post ID as CSS Background

Solved

Use ACF image field from specific post ID as CSS Background

  • I’ve been researching the heck out of this, but can’t get the answer.

    I am trying to add CSS background images to a bunch of container classes on an archive page (Shop), by calling on an image field I have set up in each product (ie. different image for each product).

    I don’t want to touch the PHP theme files, so I am simply trying to find a way I can call a CSS background from whatever post IDs the ACF field is associated with (via inline head styles or functions).

    As I understand it, this cannot be done by simply editing the usual CSS stylesheet, and I must use inline CSS.

    This is what I have so far:

    <style type="text/css">
.woocommerce .products .grid-common-col.post-32
{background-image: url(<?php the_field('my_image'); ?>);}
</style>

    Of course, this doesn’t work. It at least needs to specify which post to get this from, since it is on an archive page, and not the post page to which the image field is uploaded. Even then, perhaps I have it all wrong and it still won’t work.

    When ACF shortcodes are used, for instance, a (post_id=”32″) can be set. How do I specify the equivalent in this situation?

    Either: inline CSS inserted via a code editor into the head, or a functions snippet to filter the PHP to make it possible – but not any solution that requires hard editing of the PHP theme file…

    Would really appreciate any help.

  • I am assuming that post-32 refers to the post ID of the product. But, the classes you are using for targeting do not match those used in a standard WC product loop, so I could be completely wrong, but that could have something to do with the theme I’m looking at.

    
add_action('woocommerce_before_shop_loop_item_title', 'custom_product_css');
function custom_product_css() {
  global $product;
  ?>
    <style type="text/css">
      .woocommerce .products .grid-common-col.post-<?php echo $product->id {
        background-image: url(<?php the_field('my_image', $product->id); ?>);
      }
    </style>
  <?php 
}

  • In case you missed it, this creates an inline css snippet before each product.

  • Hi John – thanks, really appreciate your help. I see what you’re doing with that code, and I’m keen to get it working.

    When I paste that code into functions, however, I get this syntax error:

    
Your PHP code changes were rolled back due to an error on line 191 of file wp-content/themes/child/functions.php. Please fix and try saving again.

syntax error, unexpected ':'


  • 
add_action('woocommerce_before_shop_loop_item_title', 'custom_product_css');
function custom_product_css() {
  global $product;
  ?>
    <style type="text/css">
      .woocommerce .products .grid-common-col.post-<?php echo $product->id; ?> {
        background-image: url(<?php the_field('my_image', $product->id); ?>);
      }
    </style>
  <?php 
}

  • @hube2 Perfect. You are an absolute legend and you’ve made my task much easier. Learning this filter really opened my eyes. Much appreciated.

  • Just a quick follow-up question, so I understand how to use this concept where ever I need to:

    How do I best to apply this to other page types, eg. single product page, blog archive, blog page, etc. Is there a list of phrases/descriptors I can swap out for ‘woocommerce_before_shop_loop_item_title’? I apologize, I know very little PHP; if I knew what to call these descriptors I could look it up… Your answers have me interested in learning more about these possibilities.

    For example, on a single product page, is there anything wrong coding-wise with the this?: 

    
// Try it on the single product page

add_action('woocommerce_before_shop_loop_item_title', 'custom_single_product_css');
function custom_single_product_css() {
  global $product;
  ?>
    <style type="text/css">
      .my-custom-block-class {
        background: url(<?php the_field('my_image', $product->id); ?>);
}
    </style>
  <?php 
}

  • They are called hooks, not really a PHP thing, it’s a WP thing.

    Search for WooCommerce Visual Hooks

    Also see https://woocommerce.github.io/code-reference/hooks/hooks.html

  • Thanks again John – your help has really opened this up for me.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.