Do you guys have any idea how i can colorize the backend variation list?
Let's take product "Jeans" as an example. This product has 3 variations (sizes) like size 6, size 8 and size 10. Now, let's say that just 2 variations are available.
If I want to edit the product in backend, and if I click the Variations icon, I have to expand all three variations just to see which one is the one sold out.
I was thinking to a solution in which the "sold out" variation is colored in red and the available one in green. I think this way it's easier to change the status from available to sold out.
Example provided below:
- The only available (in stock) variation is 38. The other ones are not available (sold out/out of stock).
enter image description here
Do you have any idea how this can be done in backend?
Thanks a lot!
Unfortunately the template has no hooks or filters in that tag that you could use to do that, so the only way to do it would be with javascript, or overriding the template.
The javascript you'd need would be like this:
$( '#woocommerce-product-data' ).on( 'woocommerce_variations_loaded', function() {
jQuery( '.woocommerce_variation' ).each( function( index, variation ) {
var $variation = $( variation ),
stock = $variation.find( '[id^="variable_stock_status"]' ).val();
$variation.addClass( stock );
} );
} );
This would add a class to each variation item, which you could then use to style the heading, like so:
.woocommerce_variation.instock h3 { background: #DEF0D8 }
.woocommerce_variation.outofstock h3 { background: #F2DEDF }
Better would be to use the :after pseudo to add a little coloured "dot" before the variation ID.
Related
I am wondering if it is possible to do a block transform that uses a createBlock function that can set a className on a block. I also wonder if a block transform that uses a createBlock function can target a block variation.
I am working on a WordPress shortcode block transform and have slowly figured out how to make it work (see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-transforms/#shortcode). The code so far will allow you to copy and paste into the WordPress editor (I think you have to use right click and paste match styles {let me know if that is also wrong}) and will create a group with 2 paragraphs inside it. The last thing I am trying to figure out is if I can apply a box shadow block style (that is already registered) to the group during the transform. Currently I am trying to do that with className and have tried style, styles, etc...) I have tried to look through source code and many documentation pages, but I am not finding if that is possible. I was trying to just do it with className and it doesn't appear to work.
const transforms = {
from: [
{
type: 'shortcode',
tag: ["shadow"],
priority: 1,
transform: ( attrs, shortcodeObj ) => {
return createBlock( 'core/group', { className: "is-style-box-shadow" }, [
createBlock( 'core/paragraph', { content: attrs.named.heading }),
createBlock( 'core/paragraph', { content: shortcodeObj.shortcode.content })
] );
}
}
],
};
And this is the shortcode to paste into the editor
[shadow heading="Heading Test"]
This content should be accessible in the transform
[/shadow]
Alternatively, another solution would be to transform to a block variation that already has the block style defined, but I am not finding if that is possible either. Any advice would be really helpful to trying to perfect copy and paste into WordPress.
Google Closure Library editor: demo, documentation.
The editable area is an iframe. How can I set the default font of the editable area? Now it is the default font of the browser. I prefer not to put a font tag around the content in the editable area**. That way, I can change the font of my website in the future, without the need to modify every HTML-content written in the editor.
** What I mean by that is something like this:
<font size="2" face="georgia, serif"><b>content</b></font>
I would prefer just this:
<b>content</b>
... and then style the editable area of the editor with the georgia font using CSS. That way, the HTML-content (produced by the editor) in my database wouldn't contain a hard-coded font, so I could change the font in the future.
Edit: maybe I should use a SeamlessField instead of a Field for the editable area?
Once you call makeEditable() on the goog.editor.Field, which creates the iFrame you referenced, the Field fires an event of type goog.editor.Field.EventType.LOAD. If you listen to that event, you can pull out the iFrame and toss in a link element to a CSS stylesheet so you can easily modify the content in your editor.
Here's the equivalent of one of my listeners that should get you on the right track. (I didn't check if the goog.editor.Field was the target of the event, but I assume it is).
some.namespace.Page.prototype.onEditorLoad_ = function(event) {
var editor = /** #type {goog.editor.Field} */ (event.target);
var iFrame = editor.getEditableIframe();
if (iFrame) {
var fieldDomHelper = editor.getEditableDomHelper();
var documentNode =
fieldDomHelper.getFrameContentDocument(iFrame).documentElement;
var head = documentNode.getElementsByTagName(goog.dom.TagName.HEAD)[0];
if (!head) {
head = fieldDomHelper.createDom(goog.dom.TagName.HEAD);
goog.dom.insertChildAt(documentNode, head, 0);
}
fieldDomHelper.appendChild(
head,
fieldDomHelper.createDom(
goog.dom.TagName.LINK,
{ 'href': '/css/myCSS.css', 'rel': 'stylesheet', 'type': 'text/css' }
)
);
}
}
Finally, in that CSS file, you can add whatever styling you want. Such as your font change.
I'd like to attach images to specific words but cannot find the right CSS selector to do so.
I have a portion of my site which displays data as it's pulled from a database, so adding classes or id's to certain words is not an option for me. I need the css to simply display a background image wherever that word (or in this case, name) is found on the page.
For example, in the following (which is pulled from a database):
<td class="data1"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Patrick</font></td>
I would like to add a background image where the name Patrick is found.
I tried variations of,
td[.table1 *='Parick'] {
background-image:url(../images/accept.png);
but that didn't get me anywhere. And since it's not in a <span> or <div> or even a link, I can't figure it out. If you have any ideas or a jQuery workaround, please let me know. Thanks!
If you can guarantee the names only appear as the only text nodes in elements, you can use a simple jQuery selector...
$(':contains("Patrick")').addClass('name');
jsFiddle.
If there may be surrounding whitespace and/or the search should be case insensitive, try...
$('*').filter(function() {
return $.trim($(this).text()).toLowerCase() == 'patrick';
}).addClass('name');
jsFiddle.
If you need to find the name anywhere in any text node and then you need to wrap it with an element, try...
$('*').contents().filter(function() {
return this.nodeType == 3;
}).each(function() {
var node = this;
this.data.replace(/\bPatrick\b/i, function(all, offset) {
var chunk = node.splitText(offset);
chunk.data = chunk.data.substr(all.length);
var span = $('<span />', {
'class': 'name',
text: all
});
$(node).after(span);
});
});
jsFiddle.
I would recommend using the third example.
I'm using image map on my web page and iPad app. Each area on the image map is a clickable element to make sound, which I can do easily with jQuery. But I haven't been able to change the style, like either showing the border, or change the fill color just to indicate that the area is clicked. If anybody has done this, please let me know; it seems simple, but I'm really stumped.
I got it to work thanks to James Treworgy's awesome ImageMaster Jquery plugin.
$('area').mousedown(function(e) {
$(this).mapster('set',true);
});
$('area').mouseup(function(e) {
$(this).mapster('set',false);
});
$('area').bind( "touchstart", function(e){
$(this).mapster('set',true);
});
$('area').bind( "touchend", function(e){
$(this).mapster('set',false);
});
It's hard to say without seeing the code, but the same way you are referencing the parts of the map is the same way you apply the styles.
If you have a section1 id, then you css could be
#section1{
border://something
background-color://something else
}
Or, in your script, when you reference the click, you also add some styles, e.g.,
$('#section1').click(function(){
//whatever
$(this).css({'background-color' : 'red', 'border' : '1px solid black'});
});
I'm trying to find an element by a CSS selector. I have a script which I'm using on multiple sites, and there is the same element, but with different classes. Is there any way to find by something like that:
css=div[(id='resultVersionA']||[id='resultVersionB')]
It must work for my next elements
#first-order price, #first price input[type='submit']
To be more clear: In upon query I want to select button which is under div which is I 'first_order price' OR 'first price'.
This should do it:
#first-order price input[type='submit'], #first price input[type='submit']
#first-order price, #first price input[type='submit']
Do both elements have different IDs as well as classes? If they have different IDs you could just use:
document.GetElementById('resultVersionA');
Otherwise, if this element is only used once on the page with a given class, then:
var rsltVerA = document.GetElementsByTagName('div').getClass('resultVersionA');
var rsltVerB = document.GetElementsByTagName('div').getClass('resultVersionB');