Visual Editor for Product Description

[uladk]

Is there anyway to install a WYSIWYG editor for product descriptions? In particular CKEditor? I noticed this textarea accepts html tags but this isn’t client friendly.

Thanks

[amin007]

Nope, the product description area is not really meant to have a lot of HTML and other designs as all the fancy displays are very compact. You should consider doing the product display using the WordPress’s visual editor and just place a button for the product using eStore. This post explains more on this:

https://support.tipsandtricks-hq.com/forums/topic/can-i-put-multiple-images-and-videos-in-the-fancy-display

[uladk]

Thanks for your reply.

I managed to get the ckeditor installed for the product description textarea. The reason I wanted to do this was to keep all the product information together (I didn’t want my client to add a product through eStore then have to edit information in that location and then have to edit descriptions in the wordpress page/post where the product is called). Also, I’m bypassing the fancy displays by creating my own functions to display the data.

To install it I did the following (incase others would like to know):

Upload ckeditor to your server. I uploaded mine to “wp-content/themes/themeName/js/”

Within eStore’s “eStore_product_management.php” do the following:

Add an ID to the Product Description textarea within:

<textarea name=”productdesc” cols=”83″ rows=”3″><?php echo $editingproduct->description; ?></textarea>

It will look like this:

<textarea id=”theproductdesc” name=”productdesc” cols=”83″ rows=”3″><?php echo $editingproduct->description; ?></textarea>

Add a call to the function that will load ckeditor.js:

echo wp_eStore_load_ckeditor_js();

underneath the following existing line:

echo wp_eStore_load_jquery();

Within eStore’s “admin_includes.php” do the following:

Add this function under the “wp_eStore_load_jquery()” function. This is the function that loads ckeditor.js (the source of your script will be different):

function wp_eStore_load_ckeditor_js()

{

return ‘<script type=”text/javascript” src=”‘.WP_CONTENT_URL.’/themes/yourThemeName/js/ckeditor/ckeditor.js”></script>’;

}

In the “eStore_admin_js_scripts()” function, add this code at the end output string (this replaces the textarea with the visually rich ckeditor):

CKEDITOR.replace(“theproductdesc”);

“theproductdesc” refers to the ID we added to the Product Description textarea.

Please note that updating the eStore plugin will most likely overwrite the modified files, so this will have to be done after every update.

[amin007]

Thank you for sharing.

[Author]

Posts