Magento Use Custom Product Attributes to Add CMS Static Block to Product Page

The Magento shopping cart has wonderful tools like attributes that makes it easy for users to control custom content on your products. Recently, I have had a client that needs to display the same information over multiple products. So rather than manually adding it on one product, I thought it would be easier to link a custom cms static block to the product page. While this seems like an easy thing to do, Magento makes this a bit complicated to set up. So this tutorial is meant to show you how to do this! After this tutorial you will be able to control static cms blocks from any product in your Magento store.

So let’s begin.

Setting up your Custom Product Attribute.

First we need to set up a custom product attribute correctly in magento. This will let us create a few cms static blocks and link them to our product. First login to your magento backend and go to Catalog > Attribute > Manage Attributes. Once the page reloads click on “Add New Attribute”. This will take you to a page where you can set up your attribute.

First set your attribute code. In this example I set mine to product_color_set. Why? because I want to be able to control different product color sets, meaning color images, from the product page. Next, select change Catalog Input Type for Store Owner to “Dropdown”. Finally on this page make sure Allow HTML Tags on Frontend is set to “Yes”. If you would like to see my settings please refer to the image below.

Next click on “Manage Label / Options. Here you will add an admin and default store name. I set this to “Color Set” for both admin and default view. Finally on this page you want to add options. To do this click on the “Add Option” button. Here you will want to set the first box, or the admin box, to something that makes sense. This is the terms you will see on the product page. Next under the Default Store View box you will want to type in a name that you will use for the CMS static blocks. In this case I added something like hand_dyed_cotton, I also created one called hand_dyed_silk, which I will then later create a static block called hand_dyed_cotton. After you have added all of the different options you want click “Save”. You can view my set-up below.

Lastly for the attribute set up, we will have to associate the attribute with the proper product type. To do this go to Catalog > Attributes > Manage Attribute Sets. Here you should see, if you have set up, multiple attribute sets. In my case I only have one, default. Click on the one you want to add the drop down option to. Once the page reloads on the right hand side under “Unassigned Attributes” we should see the one we just created. In my case it is named product_color_set. Simply drag and drop this attribute to the middle column called “Groups” and place it under the group that makes most sense to you. For me, I placed it under “General” because I am going to have lots of products with these options. Next hit “Save Attribute Set”. Yay! you are now done with setting up the attribute. Next step creating a cms static block.

Navigate to the following location: CMS > Static Blocks. On the Static Blocks page click on “Add New Block”. Here add whatever content you would like to appear on the product page. Finally, and most importantly, set the Block Title and Identifier to the code you created under the drop down options section on manage attributes. So for my example, I created one called hand_dyed_silk. So under Identifier and Block title I would type hand_dyed_silk. I also created another drop down option called hand_dyed_cotton. Again, I would create a CMS block with the Title and Identifier set to hand_dyed_cotton. Remember, you can make the content section whatever you want! That is the whole point! For me under the content I added images for hand dyed cotton and different images for hand dyed silk.

Creating a product and setting up your custom attribute

Now navigate to Catalog > Manage Products. Then hit “Add Product” or find an existing item you might want to edit. If you add a new product, then fill out the regular needed information. But while you are doing that notice you now have an extra drop down menu, in my case it is under the “General” tab. On that drop down you can now choose the CMS block based upon what added in the attribute section on this tutorial. Now hit save and you are on to the final step.

Last set, adding your CMS static block to the product page.

Fire up your FTP client, login, and navigate to app/design/frontend/yourtemplatenamehere/yourtemplatelocationthinghere/template/catalog/product

Now download and back up view.phtml

On this page, wherever you want the static block to appear, add the following code.

1
2
3
4
<?php
$cmsstatic = $_product->getResource()->getAttribute('product_color_set')->getFrontend()->getValue($_product);
echo $this->getLayout()->createBlock('cms/block')->setBlockID($cmsstatic)->tohtml();
?>

Where you see product_color_set, you will want to change this to something else if you named your attribute set something differently.

That is it, save the file and upload it. Now refresh the page, and your cache if you have it turned on, and view your wonderful work!

If you have any questions please feel free to contact me.

Also be sure to check out my web site design portfolio.

Be Sociable, Share!
  • http://ariasrugs.com mousa

    where is the code i need to add i dont see it.

    • Miles

      I have added the code back… that is strange it went missing. I need to integrate a new system to display code.

      Anyway, I have added it into this comment too. Let me know if it doesn’t work.

      1
      2
      3
      4
      <?php
      $cmsstatic = $_product->getResource()->getAttribute('product_color_set')->getFrontend()->getValue($_product);
      echo $this->getLayout()->createBlock('cms/block')->setBlockID($cmsstatic)->tohtml();
      ?>
  • StevieDean3000

    great thanks really helpful, where would i put this code for it to display in the additional information tab? .

    • http://www.milessebesta.com/ Miles

      Hi there,

      Are you talking about the front-end or backend? Generally with the front end it depends on how your theme is constructed.
      Lots of time you will see it under some place like /app/design/frontend/themenamehere/themenamehere/template/catalog/product/view/additional.phtml

      But, it just depends on how you constructed your theme.

  • mken

    great info! Thanks so much but what if i want to add the custom block content inside one of the product tabs below? like the product description, additional info, review tags i want another tab showing the content of a static block but on selected products only not on all products. please could you help me on this?

    • http://www.milessebesta.com/ Miles

      Hi there, I am not sure what you mean by tabs? Are you using a third party plugin like easy tabs to create tabs for the products? Is this a custom code? Unfortunately, there isn’t really an easy answer. I, or another developer, would have to look at the codetemplate you have. This is a more customized request, it all depends on how you built the product page and any third party plugins you might be using. It is possible to do, it is just a simple if and then statement, but where you place it the code and how you write it depends on too many other items. I will be sending you a personal email, to see if I can help out.

  • elske

    This works!! I’m happy, thank you. :)

  • Andy Storey

    WOW – Just carried out the steps to the letter and it worked! What a great article – many thanks!

  • hellohello

    Any idea how to make this work with a multiple select box rather than just a drop down?